All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The Slider is a widget that allows an end user to set a numeric value on a continuous range of possible values.

View Demo

The following code adds a simple Slider to your page. The min and max options limit the range of accepted values. The value sets the initial value for the widget.

jQuery
HTML
JavaScript
<div id="sliderContainer"></div>
$(function() {
    $("#sliderContainer").dxSlider({
        min: 0,
        max: 100,
        value: 25
    });
});
Angular
HTML
TypeScript
<dx-slider
    [min]="0"
    [max]="100"
    [(value)]="value">
</dx-slider>
import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    value = 25;
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})
Vue
<template>
    <DxSlider
        :min="0"
        :max="100"
        :value.sync="value"
    />
</template>

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

import { DxSlider } from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider
    },
    data() {
        return {
            value: 25
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Slider } from 'devextreme-react/slider';

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

        this.state = {
            value: 25
        };

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

    handleValueChange(e) {
        const previousValue = e.previousValue;
        const newValue = e.value;
        // Event handling commands go here

        this.setState({
            value: newValue
        });
    }

    render() {
        return (
            <Slider
                min={0}
                max={100}
                value={this.state.value}
                onValueChanged={this.handleValueChange}
            />
        );
    }
}

export default App;

In addition, you can specify the step of Slider values using the step option.

jQuery
JavaScript
$(function() {
    $("#sliderContainer").dxSlider({
        min: 0,
        max: 100,
        value: 25,
        step: 10
    });
});
Angular
HTML
TypeScript
<dx-slider
    [min]="0"
    [max]="100"
    [step]="10"
    [(value)]="value">
</dx-slider>
import { DxSliderModule } from "devextreme-angular";
// ...
export class AppComponent {
    value = 25;
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})
Vue
<template>
    <DxSlider
        :min="0"
        :max="100"
        :step="10"
        :value.sync="value"
    />
</template>

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

import { DxSlider } from 'devextreme-vue/slider';

export default {
    components: {
        DxSlider
    },
    data() {
        return {
            value: 25
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Slider } from 'devextreme-react/slider';

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

        this.state = {
            value: 25
        };

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

    handleValueChange(e) {
        const previousValue = e.previousValue;
        const newValue = e.value;
        // Event handling commands go here

        this.setState({
            value: newValue
        });
    }

    render() {
        return (
            <Slider
                min={0}
                max={100}
                step={10}
                value={this.state.value}
                onValueChanged={this.handleValueChange}
            />
        );
    }
}

export default App;
See Also