All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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"
        v-model:start="startValue"
        v-model:end="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"
        v-model:start="startValue"
        v-model:end="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