scale maxRange

Specifies the maximum 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 maximum range that can be selected. When trying to move a slider from the other slider further than the specified maximum range, the marker will display the last possible value that can be set and change the font color to 'red'. You can set which color to use to indicate an invalid range. For this purpose, use the invalidRangeColor property of the sliderMarker configuration object.

In case of the numeric scale, assign a numeric value to this property. If the scale is of the date-time type, assign one of the predefined string values or an object to this property. The object's properties specify the number of days, hours, etc.

NOTE: Setting a maximum range is unavailable for a discrete scale.

You can also set a minimum range that can be selected, using the minRange property.

Show Example:
jQuery

In this example, the maxRange option is set to 'month'.

<div id="rangeSelectorContainer" style="height: 160px"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        behavior: {
            snapToTicks: false
        },
        scale: {
            startValue: new Date(2012, 2),
            endValue: new Date(2012, 6),
            maxRange: 'month'
        },
        selectedRange: {
            startValue: new Date(2012, 3, 1),
            endValue: new Date(2012, 4, 1)
        }
    });
});

days

Specifies how many days can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            maxRange: { days: 14 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5),
            endValue: new Date(2012, 2, 19)
        }
    });
});

hours

Specifies how many hours can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            maxRange: { hours: 12 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 14),
            endValue: new Date(2012, 2, 6, 2)
        }
    });
});

milliseconds

Specifies how many milliseconds can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            maxRange: { milliseconds: 10000 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 12, 30, 40, 0),
            endValue: new Date(2012, 2, 5, 12, 30, 50, 0)
        }
    });
});

minutes

Specifies how many minutes can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            maxRange: { minutes: 10 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 13, 0),
            endValue: new Date(2012, 2, 5, 13, 5)
        }
    });
});

months

Specifies how many months can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            maxRange: { months: 3 }
        },
        sliderMarker: {
            format: 'monthAndYear'
        },
        selectedRange: {
            startValue: new Date(2012, 4),
            endValue: new Date(2012, 7)
        }
    });
});

quarters

Specifies how many quarters can be selected maximum. Available for a date-time scale only.

Type: Number

seconds

Specifies how many seconds can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            maxRange: { seconds: 30 }
        },
        selectedRange: {
            startValue: new Date(2012, 2, 5, 12, 32, 0),
            endValue: new Date(2012, 2, 5, 12, 32, 30)
        }
    });
});

weeks

Specifies how many weeks can be selected maximum. Available for a date-time scale only.

Type: Number

years

Specifies how many years can be selected maximum. Available for a date-time scale only.

Type: Number

Show Example:
jQuery

In this example, the maxRange 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),
            showMinorTicks: false,
            maxRange: { years: 5 }
        },
        sliderMarker: {
            format: 'year'
        },
        selectedRange: {
            startValue: new Date(2004, 0),
            endValue: new Date(2007, 0)
        }
    });
});