Drag the handle to select a value.
For more details about the slider widget, see the API Documentation Slider Widget .
default function
Basic sliders are horizontal and have a single handle that can be moved with the mouse or the arrow keys.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - default function</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider" ).slider(); }); </script> </head> <body> <div id="slider"></div> </body> </html>
color picker
Combined three sliders to create a simple RGB color picker.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - color picker</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } </style> <script> function hexFromRGB(r, g, b) { where hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#swatch" ).css( "background-color", "#" + hex ); } $(function() { $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 255 ); $( "#green" ).slider( "value", 140 ); $( "#blue" ).slider( "value", 60 ); }); </script> </head> <body class="ui-widget-content" style="border:0;"> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> simple color picker </p> <div id="red"></div> <div id="green"></div> <div id="blue"></div> <div id="swatch" class="ui-widget-content ui-corner-all"></div> </body> </html>
multiple sliders
Combine horizontal and vertical sliders, each with their own options, to create a music player UI.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - multiple sliders</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #eq span { height:120px; float:left; margin:15px } </style> <script> $(function() { // set master volume $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // set graphic equalizer $( "#eq > span" ).each(function() { // read initial value from tag and delete var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); }); </script> </head> <body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> master volume </p> <div id="master" style="width:260px; margin:15px;"></div> <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> graphic equalizer </p> <div id="eq"> <span>88</span> <span>77</span> <span>55</span> <span>33</span> <span>40</span> <span>45</span> <span>70</span> </div> </body> </html>
range slider
Set range
the option to true to get a range of values with two drag handles. Controls between the handles are filled with a different background color to indicate that the range of values is selectable.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - range slider</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> </head> <body> <p> <label for="amount">Price range:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body> </html>
range with a fixed maximum
The maximum value of the fixed range slider, the user can only select the minimum value. Set range
the option to "max".
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider (Slider) - range with fixed maximum value</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range-max" ).slider({ range: "max", min: 1, max: 10, value: 2, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">Minimum number of rooms:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range-max"></div> </body> </html>
range with a fixed minimum
The minimum value of the fixed range slider, the user can only select the maximum value. Set range
the option to "min".
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider (Slider) - range with fixed minimum value</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 700, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">Maximum price:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range-min"></div> </body> </html>
slider bound to select
How to bind a slider to an existing select element. Choose to remain visible to show changes. When the selection changes, update the slider at the same time.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - slider bound to select</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var select = $( "#minbeds" ); var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); }); }); </script> </head> <body> <form id="reservation"> <label for="minbeds">Minimum number of beds</label> <select name="minbeds" id="minbeds"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </form> </body> </html>
slider scroll bar
Use the sliders to manipulate the positioning of content on the page. In this instance, it's a scrollbar that gets a value.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - slider scroll bar</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } </style> <script> $(function() { //scroll panel part var scrollPane = $( ".scroll-pane" ), scrollContent = $( ".scroll-content" ); // create slider var scrollbar = $( ".scroll-bar" ).slider({ slide: function( event, ui ) { if ( scrollContent.width() > scrollPane.width() ) { scrollContent.css( "margin-left", Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) ) + "px" ); } else { scrollContent.css( "margin-left", 0 ); } } }); //Append the icon to be processed var handleHelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handleHelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); // As the slider handle scrolls, change the overflow to hide scrollPane.css( "overflow", "hidden" ); / / Define the size of the scroll bar and handle proportionally according to the scrolling distance function sizeScrollbar() { var remainder = scrollContent.width() - scrollPane.width(); var proportion = remainder / scrollContent.width(); var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); scrollbar.find( ".ui-slider-handle" ).css({ width: handleSize, "margin-left": -handleSize / 2 }); handleHelper.width( "" ).width( scrollbar.width() - handleSize ); } //Based on the scroll content position, reset the value of the slider function resetValue() { var remainder = scrollPane.width() - scrollContent.width(); var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : parseInt( scrollContent.css( "margin-left" ) ); var percentage = Math.round( leftVal / remainder * 100 ); scrollbar.slider( "value", percentage ); } //If the slider is 100% and the window becomes larger, display the content function reflowContent() { var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); var gap = scrollPane.width() - showing; if ( gap > 0 ) { scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); } } // Change the position of the handle when zooming the window $( window ).resize(function() { resetValue(); sizeScrollbar(); reflowContent(); }); //Initialize scroll bar size setTimeout( sizeScrollbar, 10 );//safari timeout }); </script> </head> <body> <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header">1</div> <div class="scroll-content-item ui-widget-header">2</div> <div class="scroll-content-item ui-widget-header">3</div> <div class="scroll-content-item ui-widget-header">4</div> <div class="scroll-content-item ui-widget-header">5</div> <div class="scroll-content-item ui-widget-header">6</div> <div class="scroll-content-item ui-widget-header">7</div> <div class="scroll-content-item ui-widget-header">8</div> <div class="scroll-content-item ui-widget-header">9</div> <div class="scroll-content-item ui-widget-header">10</div> <div class="scroll-content-item ui-widget-header">11</div> <div class="scroll-content-item ui-widget-header">12</div> <div class="scroll-content-item ui-widget-header">13</div> <div class="scroll-content-item ui-widget-header">14</div> <div class="scroll-content-item ui-widget-header">15</div> <div class="scroll-content-item ui-widget-header">16</div> <div class="scroll-content-item ui-widget-header">17</div> <div class="scroll-content-item ui-widget-header">18</div> <div class="scroll-content-item ui-widget-header">19</div> <div class="scroll-content-item ui-widget-header">20</div> </div> <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <div class="scroll-bar"></div> </div> </div> </body> </html>
alignment increment
Set the increment for the slider value by step
setting the option to an integer, usually a divisor of the slider's maximum value. The default increment is 1.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - alignment increment</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider" ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">Donation amount ($50 increments):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider"></div> </body> </html>
vertical range slider
Change the orientation of the range slider to vertical. By .height()
assigning a height value, or setting the height via CSS, and setting orientation
the option to "vertical".
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - vertical range slider</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-range" ).slider({ orientation: "vertical", range: true, values: [ 17, 67 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> </head> <body> <p> <label for="amount">Sales target (millions):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range" style="height:250px;"></div> </body> </html>
vertical slider
Change the orientation of the slider to vertical. By .height()
assigning a height value, or setting the height via CSS, and setting orientation
the option to "vertical".
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI slider (Slider) - vertical slider</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) ); }); </script> </head> <body> <p> <label for="amount">Volume:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-vertical" style="height:200px;"></div> </body> </html>