jQuery UI Slider
jQuery UI Slider lets users select a numeric value or range by moving one or more handles. It works well for prices, ratings, time settings, color controls and other bounded numeric input.
Basic Slider Top ↑
$( function () {
$( "#slider" ).slider({
value: 40,
min: 0,
max: 100,
step: 1
});
});
Demo: basic Slider with full code and CDN →
Vertical or Horizontal Orientation Top ↑
The default orientation is horizontal. Set orientation: "vertical" for a vertical control.
$( "#slider" ).slider({
orientation: "vertical",
min: 0,
max: 100,
value: 50
});
Range Slider with Two Handles Top ↑
Use range: true and a values array when the user must select a minimum and maximum.
$( "#slider" ).slider({
range: true,
min: 0,
max: 500,
values: [ 100, 350 ]
});
Demo: range Slider with minimum and maximum handles →
Demo: range Slider with default values →
change Event Top ↑
change fires after the value changes and the interaction completes, or when the value is changed programmatically.
$( "#slider" ).slider({
change: function ( event, ui ) {
$( "#result" ).text(
"Changed to: " + ui.value
);
}
});
slide Event Top ↑
slide fires repeatedly while the handle moves.
$( "#slider" ).slider({
slide: function ( event, ui ) {
$( "#result" ).text(
"Current value: " + ui.value
);
}
});
start and stop Events Top ↑
$( "#slider" ).slider({
start: function ( event, ui ) {
$( "#status" ).text( "Movement started" );
},
stop: function ( event, ui ) {
$( "#status" ).text(
"Stopped at: " + ui.value
);
}
});
Demo: Slider start and stop events →
Add Attributes to the Slider Element Top ↑
The Slider widget uses a normal DOM element, so you can add IDs, classes and data-* attributes as usual. For boolean properties on form controls, use .prop(); for ordinary attributes, use .attr().
$( "#slider" )
.attr( "data-unit", "px" )
.slider({
min: 0,
max: 100,
value: 40
});
Demo: Slider with additional attributes →
Change Slider Value from a Text Box Top ↑
$( "#slider_value" ).on( "change", function () {
const value = Number( $( this ).val() );
if ( Number.isFinite( value ) ) {
$( "#slider" ).slider(
"value",
value
);
}
});
Demo: change Slider value from a text box →
Interlink Slider and Spinner Top ↑
Slider and Spinner can represent the same numeric value. Update the other widget from each widget's event and clamp values to the shared range.
const $slider = $( "#slider" );
const $spinner = $( "#spinner" );
$slider.slider({
min: 0,
max: 100,
value: 50,
slide: function ( event, ui ) {
$spinner.spinner(
"value",
ui.value
);
}
});
$spinner.spinner({
min: 0,
max: 100,
spin: function ( event, ui ) {
$slider.slider(
"value",
ui.value
);
}
});
Demo: interlinked Slider and Spinner →
Enable or Disable Slider Top ↑
$( "#slider" ).slider( "disable" );
$( "#slider" ).slider( "enable" );
When a checkbox controls the state, read it with .prop("checked").
$( "#enable_slider" ).on( "change", function () {
$( "#slider" ).slider(
$( this ).prop( "checked" )
? "enable"
: "disable"
);
});
Demo: enable/disable Slider with a checkbox →
Customize Slider Handle Style Top ↑
Use CSS to style the generated handle. Keep the hit target large enough to drag comfortably.
.ui-slider .ui-slider-handle {
width: 1.4rem;
height: 1.4rem;
}
Demo: Slider handle styled with an image →
Set Time with Sliders Top ↑
The original examples use separate sliders for hours, minutes and seconds, and then combine them with a Datepicker.
Demo: set hour, minute and second with Sliders →
Demo: Datepicker plus time Sliders →
Use Sliders for Colors Top ↑
A Slider can update a hexadecimal color component or combine three sliders for red, green and blue.
function componentToHex( value ) {
return Math.round( value )
.toString( 16 )
.padStart( 2, "0" );
}
function rgbToHex( red, green, blue ) {
return "#" +
componentToHex( red ) +
componentToHex( green ) +
componentToHex( blue );
}
Demo: change color with one Slider →
Demo: RGB color with three Sliders →
Demo: generate font and background CSS with Sliders →
Continue to jQuery UI Spinner →
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
