React RangeSlider - Overview

The RangeSlider is a UI component that allows an end user to choose a range of numeric values. Basically, the RangeSlider is the Slider UI component with a second handle added.

View Demo

The following code adds a simple RangeSlider to your page. The start and end properties specify the selected interval. The min and max properties limit the range of accepted values.

jQuery
HTML
JavaScript
<div id="rangeSliderContainer"></div>
$(function() {
    $("#rangeSliderContainer").dxRangeSlider({
        min: 0, max: 100,
        start: 20, end: 60
    });
});
Angular
HTML
TypeScript
<dx-range-slider
    [min]="0"
    [max]="100"
    [(start)]="startValue"
    [(end)]="endValue">
</dx-range-slider>
import { DxRangeSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    startValue = 20;
    endValue = 60;
}
@NgModule({
    imports: [
        // ...
        DxRangeSliderModule
    ],
    // ...
})
Vue
Code
<template>
    <DxRangeSlider
        :min="0"
        :max="100"
        v-model:start="startValue"
        v-model:end="endValue"
    />
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxRangeSlider } from 'devextreme-vue/range-slider';

export default {
    components: {
        DxRangeSlider
    },
    data() {
        return {
            startValue: 20,
            endValue: 60
        };
    }
}
</script>
React
Code
import React, { useCallback, useState } from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { RangeSlider, type RangeSliderTypes } from 'devextreme-react/range-slider';

function App() {
    const [startValue, setStartValue] = useState<number | undefined>(20);
    const [endValue, setEndValue] = useState<number | undefined>(60);

    const handleValueChange = useCallback((e: RangeSliderTypes.ValueChangedEvent) => {
        const newStartValue = e.start;
        const newEndValue = e.end;
        // Event handling commands go here

        setStartValue(newStartValue);
        setEndValue(newEndValue);
    }, []);

    return (
        <RangeSlider
            min={0}
            max={100}
            start={startValue}
            end={endValue}
            onValueChanged={handleValueChange}
        />
    );
}

export default App;

In addition, you can specify the step of RangeSlider values using the step property.

jQuery
JavaScript
$(function() {
    $("#rangeSliderContainer").dxRangeSlider({
        min: 0, max: 100,
        start: 20, end: 60,
        step: 10
    });
});
Angular
HTML
TypeScript
<dx-range-slider
    [min]="0"
    [max]="100"
    [step]="10"
    [(start)]="startValue"
    [(end)]="endValue">
</dx-range-slider>
import { DxRangeSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    startValue = 20;
    endValue = 60;
}
@NgModule({
    imports: [
        // ...
        DxRangeSliderModule
    ],
    // ...
})
Vue
Code
<template>
    <DxRangeSlider
        :min="0"
        :max="100"
        :step="10"
        v-model:start="startValue"
        v-model:end="endValue"
    />
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxRangeSlider } from 'devextreme-vue/range-slider';

export default {
    components: {
        DxRangeSlider
    },
    data() {
        return {
            startValue: 20,
            endValue: 60
        };
    }
}
</script>
React
Code
import React, { useCallback, useState } from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { RangeSlider, type RangeSliderTypes } from 'devextreme-react/range-slider';

function App() {
    const [startValue, setStartValue] = useState<number | undefined>(20);
    const [endValue, setEndValue] = useState<number | undefined>(60);

    const handleValueChange = useCallback((e: RangeSliderTypes.ValueChangedEvent) => {
        const newStartValue = e.start;
        const newEndValue = e.end;
        // Event handling commands go here

        setStartValue(newStartValue);
        setEndValue(newEndValue);
    }, []);

    return (
        <RangeSlider
            min={0}
            max={100}
            step={10}
            start={startValue}
            end={endValue}
            onValueChanged={handleValueChange}
        />
    );
}

export default App;
See Also
jQuery
Angular
Vue
React