React Slider - Overview

The Slider is a UI component 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 properties limit the range of accepted values. The value sets the initial value for the UI component.

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

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