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.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.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.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.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;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also