Vue RangeSelector - scale.minRange

Specifies the minimum range that can be selected.

Selector: DxMinRange
Type:

Number

|

Object

|

TimeInterval

Default Value: undefined

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.

jQuery
index.js
$(() => {
    $('#range-selector').dxRangeSelector({
        // ...
        scale: {
            startValue: new Date(2023, 1, 1),
            endValue: new Date(2023, 6, 1),
            tickInterval: 'day',
            minRange: {
                days: 10
            }
            maxRange: 'month',
        },
    });
});
Angular
app.component.html
app.component.ts
<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
App.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
App.js
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;
NOTE
For a discrete scale, setting a minimum range is not a property. 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 setValue(value) method, the minRange property will be ignored.

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

days

Specifies the time interval measured in days. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

hours

Specifies the time interval measured in hours. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

milliseconds

Specifies the time interval measured in milliseconds. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

minutes

Specifies the time interval measured in minutes. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

months

Specifies the time interval measured in months. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

quarters

Specifies the time interval measured in quarters. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

seconds

Specifies the time interval measured in seconds. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

weeks

Specifies the time interval measured in weeks. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

years

Specifies the time interval measured in years. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number