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
<template>
    <DxRangeSlider
        :min="0"
        :max="100"
        :start.sync="startValue"
        :end.sync="endValue"
    />
</template>

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

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

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

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

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            startValue: 20,
            endValue: 60
        };

        this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(e) {
        const newStartValue = e.start;
        const newEndValue = e.end;
        // Event handling commands go here

        this.setState({
            startValue: newStartValue,
            endValue: newEndValue
        });
    }

    render() {
        return (
            <RangeSlider
                min={0}
                max={100}
                start={this.state.startValue}
                end={this.state.endValue}
                onValueChanged={this.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
<template>
    <DxRangeSlider
        :min="0"
        :max="100"
        :step="10"
        :start.sync="startValue"
        :end.sync="endValue"
    />
</template>

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

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

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

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

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            startValue: 20,
            endValue: 60
        };

        this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(e) {
        const newStartValue = e.start;
        const newEndValue = e.end;
        // Event handling commands go here

        this.setState({
            startValue: newStartValue,
            endValue: newEndValue
        });
    }

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

export default App;
See Also