jQuery UI example - Slider (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 default function
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>
Color Picker
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 plurality of sliders
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>
Range Slider
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>
With fixed maximum range
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>
Range with fixed minimum
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>
Bound to select a slider
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>
Scrollbar slider
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>
Align increment
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>
Vertical range slider
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>
Vertical slider
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>