The best jQuery UI example - Slider (Slider) Tutorial In 2024, In this tutorial you can learn The default function,Color Picker,A plurality of sliders,Range Slider,With fixed maximum range,Range with fixed minimum,Bound to select a slider,Scrollbar slider,Align increment,Vertical range slider,Vertical slider,
Drag the handle to select a value.
For more details about the slider member, see the API documentation slider member (the Slider the Widget) .
The basic slider is horizontal and has a single handle, can be moved with the mouse or arrow keys.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - The 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>
A combination of 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) { var 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>
A combination of horizontal and vertical sliders, each with its own option, to create a music player UI.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - 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 the Master Volume $ ( "#master") .slider ({ value: 60, orientation: "horizontal", range: "min", animate: true }); // Set the graphic equalizer $ ( "#eq> span") .each (function () { // Reads the initial value from the tag and remove the 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>
Setting range
option is true, to obtain a range of values with two drag handles. Between the control handle with a different background color fill to indicate the value of the interval is optional.
<! 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>
Fixing the maximum range of the slider, the user can select the minimum. Setting range
option to "max".
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - range with a fixed maximum </ 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>
The minimum fixed range slider, the user can select the maximum. Setting range
option "min".
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - range with a fixed minimum </ 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>
How to bind a slider to select an existing element. Choose remains visible in order to show changes. When the selection changes, update the slider.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - is bound to select a 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 () { 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>
Use the slider to operate locate the page content. In this instance, it is able to get the value of a scroll bar.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - slide the 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 portion var scrollPane = $ ( ".scroll-pane"), scrollContent = $ ( ".scroll-content"); // Create a 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 icon to process 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 (); // Since the slider handle scroll, change to hide the overflow portion scrollPane.css ( "overflow", "hidden"); // According to the scrolling distance is defined by the ratio of the size of the scroll bar and the handle 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); } // Content-based scroll 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 increases, the display 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); } } // Handle change when the zoom window position $ (window) .resize (function () { resetValue (); sizeScrollbar (); reflowContent (); }); // Initialize the scrollbar 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>
By step
option is set to an integer slider to set the increment value is usually the maximum divisor slider. The default increment is 1.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Slider (Slider) - aligned incremental </ 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>
Change the scope of the direction perpendicular to the slider. By .height()
assign a height value, or set the height by CSS, and set orientation
options for the "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 targets (in 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>
Change the direction of the slider is vertical. By .height()
assign a height value, or set the height by CSS, and set orientation
options for the "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>