React RangeSlider - 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.
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;
See Also
jQuery
Angular
Vue
React
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.