JavaScript/jQuery RangeSelector - scale.maxRange
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.
jQuery
$(() => {
$('#range-selector').dxRangeSelector({
// ...
scale: {
startValue: new Date(2023, 1, 1),
endValue: new Date(2023, 6, 1),
tickInterval: 'day',
minRange: {
days: 10
}
maxRange: 'month',
},
});
});Angular
<dx-range-selector ... >
<dxo-scale
[startValue]="startValue"
[endValue]="endValue"
tickInterval="day"
[minRange]="minRange"
maxRange="month"
>
</dxo-scale>
</dx-range-selector>
export class AppComponent {
startValue: Date = new Date(2023, 1, 1);
endValue: Date = new Date(2023, 6, 1);
minRange: Object = {
days: 10
};
}Vue
<template>
<DxRangeSelector ... >
<DxScale
:start-value="startValue"
:end-value="endValue"
>
<DxTickInterval :days="1"/>
<DxMinRange :days="10"/>
<DxMaxRange :months="1"/>
</DxScale>
</DxRangeSelector>
</template>
<script setup>
import DxRangeSelector, { DxScale, DxTickInterval, DxMinRange, DxMaxRange } from 'devextreme-vue/range-selector';
const startValue = new Date(2023, 1, 1);
const endValue = new Date(2023, 6, 1);
</script>React
import {
RangeSelector, Scale, MinorTick,
} from 'devextreme-react/range-selector';
const startValue = new Date(2023, 1, 1);
const endValue = new Date(2023, 6, 1);
const minRange = {
days: 10
};
function App() {
return (
<RangeSelector ... >
<Scale
startValue={startValue}
endValue={endValue}
tickInterval="day"
minRange={minRange}
maxRange="month"
/>
</RangeSelector>
);
}
export default App;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.
You can also set a minimum range that can be selected, using the minRange property.
days
Specifies the time interval measured in days. Accepts integer values. Available only for an axis/scale that displays date-time values.
hours
Specifies the time interval measured in hours. Accepts integer values. Available only for an axis/scale that displays date-time values.
milliseconds
Specifies the time interval measured in milliseconds. Accepts integer values. Available only for an axis/scale that displays date-time values.
minutes
Specifies the time interval measured in minutes. Accepts integer values. Available only for an axis/scale that displays date-time values.
months
Specifies the time interval measured in months. Accepts integer values. Available only for an axis/scale that displays date-time values.
quarters
Specifies the time interval measured in quarters. Accepts integer values. Available only for an axis/scale that displays date-time values.
seconds
Specifies the time interval measured in seconds. Accepts integer values. Available only for an axis/scale that displays date-time values.
weeks
Specifies the time interval measured in weeks. Accepts integer values. Available only for an axis/scale that displays date-time values.
years
Specifies the time interval measured in years. Accepts integer values. Available only for an axis/scale that displays date-time values.