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.
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" v-model:value="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" v-model:value="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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.