JavaScript/jQuery 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
Feedback