As you can see, all links refer to online sources of jQuery, jQuery UI so you don’t have to have these files downloaded to start off. However, the The following sections contain default and basic application of the slider<\/strong> widget.<\/p>\n The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys. We’d have only one element in HTML:<\/p>\n Also, we’d like to make this slider 30% of its original width to see it better. We do this in CSS by refering to Finally, in the JS section, we enable the slider on our element.<\/p>\n Note that In this example we will combine three sliders to create a simple RGB colorpicker.<\/p>\n In CSS, we style the three sliders to have their specific RGB colors:<\/p>\n Now the JS part is a bit complicated, but it basically refreshes the swatch as soon as you drag the slider.<\/p>\n Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player. In the HTMl we’d have a div element for the master slider and another div for the other sliders, like so:<\/p>\n Just a margin around the This time, the slider is given options to it, like Set the The JS section, handles the change as soon as we drag the slider, thus updating the price values:<\/p>\n Fix the maximum value of the range slider so that the user can only select a minimum. Set the range option to In the JS section, we first set the options Fix the minimum value of the range slider so that the user can only select a maximum. Set the Just like in the previous example, here we also have a minimum, a maximum and an inital value pre set.<\/p>\n How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.<\/p>\n In this case, we add the Increment slider values with the Now, adding the Change the orientation of the range slider to vertical. Assign a height value via Change the orientation of the slider to vertical. Assign a height value via This time, in contrast to the previous example, we have no This example shows how you can use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.<\/p>\n In addition to jQuery UI default ways of customization regarding design and functionality, you could have even more sliders from the internet. You can find a wide range of custom sliders beautifully designed in this website: http:\/\/www.jqueryrain.com\/demo\/jquery-range-slider\/<\/a>. Here are some of the alternative sliders you will find on that website:<\/p>\nstyle.css<\/code> is linked offline, but don’t worry, that is not going to make a big difference to what we’re doing, because it only contains a font size reduction.<\/p>\n2. jQuery UI Slider Examples<\/h2>\n
2.1 Default Functionality<\/h3>\n
<div class=\"slider\"><\/div>\r\n<\/pre>\n
.slider<\/code><\/p>\n.slider {\r\n width: 30%;\r\n}\r\n<\/pre>\n $(function(){\r\n $('.slider').slider();\r\n });\r\n<\/pre>\n$(function(){});<\/code> is equivalent to $(document).ready(function(){});<\/code><\/p>\n![\"slider1\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/slider1.gif\")
<\/a><\/p>\n2.2 Colorpicker Example<\/h3>\n
<!-- HTML SECTION -->\r\n<div id=\"red\"><\/div>\r\n<div id=\"green\"><\/div>\r\n<div id=\"blue\"><\/div>\r\n\r\n<div id=\"swatch\" class=\"ui-widget-content\"><\/div>\r\n<\/pre>\n
#red, #green, #blue {\r\n float: left;\r\n clear: left;\r\n width: 300px;\r\n margin: 15px;\r\n }\r\n #swatch {\r\n width: 120px;\r\n height: 100px;\r\n margin-left: 350px;\r\n background-image: none;\r\n }\r\n #red .ui-slider-range { background: #ef2929; }\r\n #red .ui-slider-handle { border-color: #ef2929; }\r\n #green .ui-slider-range { background: #8ae234; }\r\n #green .ui-slider-handle { border-color: #8ae234; }\r\n #blue .ui-slider-range { background: #729fcf; }\r\n #blue .ui-slider-handle { border-color: #729fcf; }\r\n<\/pre>\n function hexFromRGB(r, g, b) {\r\n var hex = [\r\n r.toString( 16 ),\r\n g.toString( 16 ),\r\n b.toString( 16 )\r\n ];\r\n $.each( hex, function( nr, val ) {\r\n if ( val.length === 1 ) {\r\n hex[ nr ] = \"0\" + val;\r\n }\r\n });\r\n return hex.join( \"\" ).toUpperCase();\r\n }\r\n function refreshSwatch() {\r\n var red = $( \"#red\" ).slider( \"value\" ),\r\n green = $( \"#green\" ).slider( \"value\" ),\r\n blue = $( \"#blue\" ).slider( \"value\" ),\r\n hex = hexFromRGB( red, green, blue );\r\n $( \"#swatch\" ).css( \"background-color\", \"#\" + hex );\r\n }\r\n $(function() {\r\n $( \"#red, #green, #blue\" ).slider({\r\n orientation: \"horizontal\",\r\n range: \"min\",\r\n max: 255,\r\n value: 127,\r\n slide: refreshSwatch,\r\n change: refreshSwatch\r\n });\r\n $( \"#red\" ).slider( \"value\", 255 );\r\n $( \"#green\" ).slider( \"value\", 140 );\r\n $( \"#blue\" ).slider( \"value\", 60 );\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.3 Multiple Sliders Example<\/h3>\n
<div id=\"master\" style=\"width:260px; margin:15px;\"><\/div>\r\n\r\n<div id=\"eq\">\r\n <span>88<\/span>\r\n <span>77<\/span>\r\n <span>55<\/span>\r\n <span>33<\/span>\r\n <span>40<\/span>\r\n <span>45<\/span>\r\n <span>70<\/span>\r\n<\/div>\r\n<\/pre>\n
span<\/code> elements to make space for each of them:<\/p>\n#eq > span {\r\n height:120px; \r\n float:left; \r\n margin:15px\r\n }\r\n<\/pre>\norientation<\/code>, range<\/code> and animate<\/code>:<\/p>\n$(function() {\r\n \/\/ setup master volume\r\n $( \"#master\" ).slider({\r\n value: 60,\r\n orientation: \"horizontal\",\r\n range: \"min\",\r\n animate: true\r\n });\r\n \/\/ setup graphic EQ\r\n $( \"#eq > span\" ).each(function() {\r\n \/\/ read initial values from markup and remove that\r\n var value = parseInt( $( this ).text(), 10 );\r\n $( this ).empty().slider({\r\n value: value,\r\n range: \"min\",\r\n animate: true,\r\n orientation: \"vertical\"\r\n });\r\n });\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.4 Range Slider Example<\/h3>\n
range<\/code> option to true<\/code> to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.<\/p>\n<p>\r\n <label for=\"amount\">Price range:<\/label>\r\n <input type=\"text\" id=\"amount\" readonly style=\"border:0; color:#f6931f; font-weight:bold;\">\r\n<\/p>\r\n\r\n<div id=\"slider-range\"><\/div>\r\n<\/pre>\n
$(function() {\r\n $( \"#slider-range\" ).slider({\r\n range: true,\r\n min: 0,\r\n max: 500,\r\n values: [ 75, 300 ],\r\n slide: function( event, ui ) {\r\n $( \"#amount\" ).val( \"$\" + ui.values[ 0 ] + \" - $\" + ui.values[ 1 ] );\r\n }\r\n });\r\n $( \"#amount\" ).val( \"$\" + $( \"#slider-range\" ).slider( \"values\", 0 ) +\r\n \" - $\" + $( \"#slider-range\" ).slider( \"values\", 1 ) );\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.5 Range with Fixed Maximum Example<\/h3>\n
\"max\"<\/code>.<\/p>\n<p>\r\n <label for=\"amount\">Minimum number of bedrooms:<\/label>\r\n <input type=\"text\" id=\"amount\" readonly style=\"border:0; color:#f6931f; font-weight:bold;\">\r\n<\/p>\r\n<div id=\"slider-range-max\"><\/div>\r\n<\/pre>\n
min<\/code>, max<\/code> and value<\/code>, to respectively the minimum, the maximum and the initial value of the slider. Then we update the number of the current value depending on the slider position:<\/p>\n $(function() {\r\n $( \"#slider-range-max\" ).slider({\r\n range: \"max\",\r\n min: 1,\r\n max: 10,\r\n value: 2,\r\n slide: function( event, ui ) {\r\n $( \"#amount\" ).val( ui.value );\r\n }\r\n });\r\n $( \"#amount\" ).val( $( \"#slider-range-max\" ).slider( \"value\" ) );\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.6 Range with Fixed Minimum<\/h3>\n
range<\/code> option to \"min\"<\/code>.<\/p>\n<p>\r\n <label for=\"amount\">Maximum price:<\/label>\r\n <input type=\"text\" id=\"amount\" readonly style=\"border:0; color:#f6931f; font-weight:bold;\">\r\n<\/p>\r\n\r\n<div id=\"slider-range-min\"><\/div>\r\n<\/pre>\n
$(function() {\r\n $( \"#slider-range-min\" ).slider({\r\n range: \"min\",\r\n value: 37,\r\n min: 1,\r\n max: 700,\r\n slide: function( event, ui ) {\r\n $( \"#amount\" ).val( \"$\" + ui.value );\r\n }\r\n });\r\n $( \"#amount\" ).val( \"$\" + $( \"#slider-range-min\" ).slider( \"value\" ) );\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.7 Slider Bound to Select<\/h3>\n
<form id=\"reservation\">\r\n <label for=\"minbeds\">Minimum number of beds<\/label>\r\n <select name=\"minbeds\" id=\"minbeds\">\r\n <option>1<\/option>\r\n <option>2<\/option>\r\n <option>3<\/option>\r\n <option>4<\/option>\r\n <option>5<\/option>\r\n <option>6<\/option>\r\n <\/select>\r\n<\/form>\r\n<\/pre>\n
div<\/code> element which will add the slider in jQuery and not have it predefined in HTML. We also set min<\/code> and max<\/code> values and a simple algorithm that will change the slider position according to the selection.<\/p>\n$(function() {\r\n var select = $( \"#minbeds\" );\r\n var slider = $( \"<div id='slider'><\/div>\" ).insertAfter( select ).slider({\r\n min: 1,\r\n max: 6,\r\n range: \"min\",\r\n value: select[ 0 ].selectedIndex + 1,\r\n slide: function( event, ui ) {\r\n select[ 0 ].selectedIndex = ui.value - 1;\r\n }\r\n });\r\n $( \"#minbeds\" ).change(function() {\r\n slider.slider( \"value\", this.selectedIndex + 1 );\r\n });\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.8 Snap to Increments Example<\/h3>\n
step<\/code> option set to an integer, commonly a dividend of the slider’s maximum value. The default increment is 1.<\/p>\n<p>\r\n <label for=\"amount\">Donation amount ($50 increments):<\/label>\r\n <input type=\"text\" id=\"amount\" readonly style=\"border:0; color:#f6931f; font-weight:bold;\">\r\n<\/p>\r\n\r\n<div id=\"slider\"><\/div>\r\n<\/pre>\n
step<\/code> to a value of 50, would result in the following:<\/p>\n $(function() {\r\n $( \"#slider\" ).slider({\r\n value:100,\r\n min: 0,\r\n max: 500,\r\n step: 50,\r\n slide: function( event, ui ) {\r\n $( \"#amount\" ).val( \"$\" + ui.value );\r\n }\r\n });\r\n $( \"#amount\" ).val( \"$\" + $( \"#slider\" ).slider( \"value\" ) );\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.9 Vertical Range Slider Example<\/h3>\n
.height()<\/code> or by setting the height through CSS, and set the orientation<\/code> option to “vertical.”<\/p>\n<p>\r\n <label for=\"amount\">Target sales goal (Millions):<\/label>\r\n <input type=\"text\" id=\"amount\" readonly style=\"border:0; color:#f6931f; font-weight:bold;\">\r\n<\/p>\r\n\r\n<div id=\"slider-range\" style=\"height:250px;\"><\/div>\r\n<\/pre>\n
$(function() {\r\n $( \"#slider-range\" ).slider({\r\n orientation: \"vertical\",\r\n range: true,\r\n values: [ 17, 67 ],\r\n slide: function( event, ui ) {\r\n $( \"#amount\" ).val( \"$\" + ui.values[ 0 ] + \" - $\" + ui.values[ 1 ] );\r\n }\r\n });\r\n $( \"#amount\" ).val( \"$\" + $( \"#slider-range\" ).slider( \"values\", 0 ) +\r\n \" - $\" + $( \"#slider-range\" ).slider( \"values\", 1 ) );\r\n });\r\n<\/pre>\n<\/a><\/p>\n2.10 Vertical Slider Example<\/h3>\n
.height()<\/code> or by setting the height through CSS, and set the orientation option to \"vertical\"<\/code>.<\/p>\n<p>\r\n <label for=\"amount\">Volume:<\/label>\r\n <input type=\"text\" id=\"amount\" readonly style=\"border:0; color:#f6931f; font-weight:bold;\">\r\n<\/p>\r\n\r\n<div id=\"slider-vertical\" style=\"height:200px;\"><\/div>\r\n<\/pre>\n
range<\/code>, just a normal vertical slider.<\/p>\n $(function() {\r\n $( \"#slider-vertical\" ).slider({\r\n orientation: \"vertical\",\r\n range: \"min\",\r\n min: 0,\r\n max: 100,\r\n value: 60,\r\n slide: function( event, ui ) {\r\n $( \"#amount\" ).val( ui.value );\r\n }\r\n });\r\n $( \"#amount\" ).val( $( \"#slider-vertical\" ).slider( \"value\" ) );\r\n });\r\n<\/pre>\n<\/a><\/p>\n3. Slider Scrollbar Example<\/h2>\n
<!-- HTML SECTION -->\r\n<div class=\"scroll-pane ui-widget ui-widget-header ui-corner-all\">\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-content-item ui-widget-header\">1<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">2<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">3<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">4<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">5<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">6<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">7<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">8<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">9<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">10<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">11<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">12<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">13<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">14<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">15<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">16<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">17<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">18<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">19<\/div>\r\n <div class=\"scroll-content-item ui-widget-header\">20<\/div>\r\n <\/div>\r\n <div class=\"scroll-bar-wrap ui-widget-content ui-corner-bottom\">\r\n <div class=\"scroll-bar\"><\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
.scroll-pane { overflow: auto; width: 45%; float:left; }\r\n .scroll-content { width: 2440px; float: left; }\r\n .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }\r\n .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }\r\n .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }\r\n .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }\r\n .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }\r\n .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }\r\n<\/pre>\n$(function() {\r\n \/\/scrollpane parts\r\n var scrollPane = $( \".scroll-pane\" ),\r\n scrollContent = $( \".scroll-content\" );\r\n\r\n \/\/build slider\r\n var scrollbar = $( \".scroll-bar\" ).slider({\r\n slide: function( event, ui ) {\r\n if ( scrollContent.width() > scrollPane.width() ) {\r\n scrollContent.css( \"margin-left\", Math.round(\r\n ui.value \/ 100 * ( scrollPane.width() - scrollContent.width() )\r\n ) + \"px\" );\r\n } else {\r\n scrollContent.css( \"margin-left\", 0 );\r\n }\r\n }\r\n });\r\n\r\n \/\/append icon to handle\r\n var handleHelper = scrollbar.find( \".ui-slider-handle\" )\r\n .mousedown(function() {\r\n scrollbar.width( handleHelper.width() );\r\n })\r\n .mouseup(function() {\r\n scrollbar.width( \"100%\" );\r\n })\r\n .append( \"<span class='ui-icon ui-icon-grip-dotted-vertical'><\/span>\" )\r\n .wrap( \"<div class='ui-handle-helper-parent'><\/div>\" ).parent();\r\n\r\n \/\/change overflow to hidden now that slider handles the scrolling\r\n scrollPane.css( \"overflow\", \"hidden\" );\r\n\r\n \/\/size scrollbar and handle proportionally to scroll distance\r\n function sizeScrollbar() {\r\n var remainder = scrollContent.width() - scrollPane.width();\r\n var proportion = remainder \/ scrollContent.width();\r\n var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );\r\n scrollbar.find( \".ui-slider-handle\" ).css({\r\n width: handleSize,\r\n \"margin-left\": -handleSize \/ 2\r\n });\r\n handleHelper.width( \"\" ).width( scrollbar.width() - handleSize );\r\n }\r\n\r\n \/\/reset slider value based on scroll content position\r\n function resetValue() {\r\n var remainder = scrollPane.width() - scrollContent.width();\r\n var leftVal = scrollContent.css( \"margin-left\" ) === \"auto\" ? 0 :\r\n parseInt( scrollContent.css( \"margin-left\" ) );\r\n var percentage = Math.round( leftVal \/ remainder * 100 );\r\n scrollbar.slider( \"value\", percentage );\r\n }\r\n\r\n \/\/if the slider is 100% and window gets larger, reveal content\r\n function reflowContent() {\r\n var showing = scrollContent.width() + parseInt( scrollContent.css( \"margin-left\" ), 10 );\r\n var gap = scrollPane.width() - showing;\r\n if ( gap > 0 ) {\r\n scrollContent.css( \"margin-left\", parseInt( scrollContent.css( \"margin-left\" ), 10 ) + gap );\r\n }\r\n }\r\n\r\n \/\/change handle position on window resize\r\n $( window ).resize(function() {\r\n resetValue();\r\n sizeScrollbar();\r\n reflowContent();\r\n });\r\n \/\/init scrollbar size\r\n setTimeout( sizeScrollbar, 10 );\/\/safari wants a timeout\r\n });\r\n<\/pre>\n<\/a><\/p>\n4. Alternative Sliders<\/h2>\n