YouTip

## Default Functionality A basic slider is horizontal, has a single handle, and can be moved using the mouse or arrow keys. $(function() { $( "#slider" ).slider(); }); ## Color Picker Combines three sliders to create a simple RGB color picker. #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; } function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex = "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 ); });

Simple Color Picker

## Multiple Sliders Combines horizontal and vertical sliders, each with their own options, to create a music player UI. #eq span { height:120px; float:left; margin:15px } $(function() { // Set master volume $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // Setup graphic equalizer $( "#eq > span" ).each(function() { // read initial value from markup and remove var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); });

Master Volume

Graphic Equalizer

## Range Slider Set the `range` option to true to get a range with two drag handles. The handle between them is filled with a different background color to indicate that the range is selectable. $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values + " - $" + ui.values ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); });

Price range:

## Range with Fixed Maximum Fix the maximum value of the range slider so the user can only select a minimum value. Set the `range` option to "max". $(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" ) ); });

Minimum number of rooms:

## Range with Fixed Minimum Fix the minimum value of the range slider so the user can only select a maximum value. Set the `range` option to "min". $(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" ) ); });

Maximum price:

## Slider Bound to Select How to bind a slider to an existing select element. The select remains visible to show the change. When the select changes, the slider is updated as well. $(function() { var select = $( "#minbeds" ); var slider = $( "" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select.selectedIndex + 1, slide: function( event, ui ) { select.selectedIndex = ui.value - 1; } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); }); }); Minimum number of beds 1 2 3 4 5 6 ## Slider Scrollbar Uses a slider to manipulate the positioning of content on the page. In this case, it's a scrollbar that can get values. .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%; } $(function() { //scroll pane section var scrollPane = $( ".scroll-pane" ), scrollContent = $( ".scroll-content" ); //create scrollbar 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 icon to handle var handleHelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handleHelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "" ) .wrap( "" ).parent(); //change overflow to hidden since slider handle scrolls scrollPane.css( "overflow", "hidden" ); //size scrollbar and handle proportionally to 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 ); } //reset slider value based on scroll content position 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 slider is 100% and window is larger, show 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 handle position on window resize $( window ).resize(function() { resetValue(); sizeScrollbar(); reflowContent(); }); //init scrollbar size setTimeout( sizeScrollbar, 10 );//safari timeout });