JavaScript/jQuery 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.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.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.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.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
jQuery
Angular
Vue
React
Feedback