scale minRange

Specifies the minimum range that can be selected.

Default Value: undefined
Accepted Values: 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'

Use this property to set the minimum range that can be selected. When moving a slider to a position near the other slider that is closer than the specified minimum range, the marker will display the last possible value that it can be set to, and change the font color to 'red'. You can set the color used to indicate an invalid range by using the invalidRangeColor property of the sliderMarker configuration object.

NOTE: For a discrete scale, setting a minimum range is not an option. For a semidiscrete scale, setting a minimum range is, conversely, required.

NOTE: The minRange property specifies the minimum range that can be selected in the UI. If you select a range in code, for example, using the setSelectedRange(selectedRange) method, the minRange property will be ignored.

You can also set the maximum range that can be selected using the maxRange property.

Show Example:
jQuery

In this example, the minRange option is set to 'week'.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 2, 4),
            endValue: new Date(2012, 3, 10),
            minRange: 'week'
        }
    });
});

days

Specifies the time interval measured in days. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set to 14 days.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 2, 5),
            endValue: new Date(2012, 3, 10),
            minRange: { days: 14 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5),
            endValue: new Date(2012, 2, 19)
        }
    });
});

hours

Specifies the time interval measured in hours. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set 12 hours.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 2, 5, 12),
            endValue: new Date(2012, 2, 7, 12),
            minRange: { hours: 12 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 14),
            endValue: new Date(2012, 2, 6, 14)
        }
    });
});

milliseconds

Specifies the time interval measured in milliseconds. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set to 10000 milliseconds.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 2, 5, 12, 30, 30, 0),
            endValue: new Date(2012, 2, 5, 12, 31, 30, 0),
            minRange: { milliseconds: 10000 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 12, 30, 40, 0),
            endValue: new Date(2012, 2, 5, 12, 31, 0, 0)
        }
    });
});

minutes

Specifies the time interval measured in minutes. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set to 10 minutes.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 2, 5, 12, 30),
            endValue: new Date(2012, 2, 5, 14, 30),
            minRange: { minutes: 10 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 13, 0),
            endValue: new Date(2012, 2, 5, 13, 10)
        }
    });
});

months

Specifies the time interval measured in months. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set to 3 months.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 0),
            endValue: new Date(2014, 0),
            minRange: { months: 3 }
        },
        sliderMarker: {
            format: 'monthAndYear'
        },
        selectedRange: {
            startValue: new Date(2012, 4),
            endValue: new Date(2012, 8)
        }
    });
});

quarters

Specifies the time interval measured in quarters. Available only for an axis/scale displaying date-time values.

Type: Number

seconds

Specifies the time interval measured in seconds. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set to 30 seconds.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 2, 5, 12, 30, 0),
            endValue: new Date(2012, 2, 5, 12, 35, 0),
            minRange: { seconds: 30 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 12, 32, 0),
            endValue: new Date(2012, 2, 5, 12, 32, 30)
        }
    });
});

weeks

Specifies the time interval measured in weeks. Available only for an axis/scale displaying date-time values.

Type: Number

years

Specifies the time interval measured in years. Available only for an axis/scale displaying date-time values.

Type: Number

Show Example:
jQuery

In this example, the minRange option is set to 5 years.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(1990, 0),
            endValue: new Date(2010, 0),
            minRange: { years: 3 }
        },
        sliderMarker: {
            format: 'year'
        },
        selectedRange: {
            startValue: new Date(2004, 0),
            endValue: new Date(2007, 0)
        }
    });
});