HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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>