<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Examples for bootstrap-slider plugin">
<meta name="author" content="">
<title>Slider for Bootstrap Examples Page</title>
<!-- core CSS -->
<link href="<%= css.bootstrap %>" rel="stylesheet">
<link href="<%= css.slider %>" rel="stylesheet">
<!-- Hightlight.js Theme Styles -->
<link href="<%= css.highlightjs %>" rel="stylesheet">
<!-- Custom styles for this template -->
<style type='text/css'>
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
h1 small {
font-size: 51%;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 5px;
}
tr:nth-child(even){background-color: #e5e5e5}
th {
background-color: #00008B;
color: white;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
.container {
min-width: 640px;
}
@media (min-width: 768px) {
.container {
max-width: 1000px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.title {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.title {
border-bottom: 0;
}
}
.well {
background-color: #E0E0E0;
}
.slider-example {
padding-top: 10px;
padding-bottom: 55px;
margin: 35px 0;
}
#destroyEx5Slider, #ex6CurrentSliderValLabel, #ex7-enabled {
margin-left: 45px;
}
#ex6SliderVal {
color: green;
}
#slider12a .slider-track-high, #slider12c .slider-track-high {
background: green;
}
#slider12b .slider-track-low, #slider12c .slider-track-low {
background: red;
}
#slider12c .slider-selection {
background: yellow;
}
#slider22 .slider-selection {
background: #2196f3;
}
#slider22 .slider-rangeHighlight {
background: #f70616;
}
#slider22 .slider-rangeHighlight.category1 {
background: #FF9900;
}
#slider22 .slider-rangeHighlight.category2 {
background: #99CC00;
}
</style>
<style type='text/css'>
/* Example 1 custom styles */
#ex1Slider .slider-selection {
background: #BABABA;
}
/* Example 3 custom styles */
#RGB {
height: 20px;
background: rgb(128, 128, 128);
}
#RC .slider-selection {
background: #FF8282;
}
#RC .slider-handle {
background: red;
}
#GC .slider-selection {
background: #428041;
}
#GC .slider-handle {
background: green;
}
#BC .slider-selection {
background: #8283FF;
}
#BC .slider-handle {
border-bottom-color: blue;
}
#R, #G, #B {
width: 300px;
}
</style>
<script type='text/javascript' src="<%= js.modernizr %>"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../../vector/js/html5shiv.js"></script>
<script src="../../../vector/js/respond.min.js"></script>
<![endif]-->
<!-- Highlight.js Styles -->
</head>
<body>
<div class="container">
<div id="top" class="jumbotron">
<h1>Slider for Bootstrap <small>bootstrap-slider.js</small></h1>
<p class="lead">Examples for the <a target="_blank" href="https://github.com/seiyria/bootstrap-slider">bootstrap-slider</a> component.<p>
</div>
<table>
<tr>
<th>Example Link</th>
<th>Example Description</th>
</tr>
<tr>
<td><a href="#example-1">Example 1</a></td>
<td>Basic example with custom formatter and colored selected region via CSS</td>
</tr>
<tr>
<td><a href="#example-2">Example 2</a></td>
<td>Range selector, options specified via data attribute</td>
</tr>
<tr>
<td><a href="#example-3">Example 3</a></td>
<td>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles</td>
</tr>
<tr>
<td><a href="#example-4">Example 4</a></td>
<td>Vertical Slider with reversed values (largest to smallest)</td>
</tr>
<tr>
<td><a href="#example-5">Example 5</a></td>
<td>Destroy instance of slider by calling destroy() method on slider instance via JavaScript</td>
</tr>
<tr>
<td><a href="#example-6">Example 6</a></td>
<td>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used</td>
</tr>
<tr>
<td><a href="#example-7">Example 7</a></td>
<td>Sliders can be enabled and disabled</td>
</tr>
<tr>
<td><a href="#example-8">Example 8</a></td>
<td>Tooltip can always be displayed</td>
</tr>
<tr>
<td><a href="#example-9">Example 9</a></td>
<td>Precision (number of places after the decimal) can be specified</td>
</tr>
<tr>
<td><a href="#example-10">Example 10</a></td>
<td>Setting custom handlers</td>
</tr>
<tr>
<td><a href="#example-11">Example 11</a></td>
<td>Using a custom step interval</td>
</tr>
<tr>
<td><a href="#example-12">Example 12</a></td>
<td>Coloring the low and high track segments</td>
</tr>
<tr>
<td><a href="#example-13">Example 13</a></td>
<td>Using tick marks and labels</td>
</tr>
<tr>
<td><a href="#example-14">Example 14</a></td>
<td>Using tick marks at specific positions</td>
</tr>
<tr>
<td><a href="#example-15">Example 15</a></td>
<td>With a logarithmic scale</td>
</tr>
<tr>
<td><a href="#example-16">Example 16</a></td>
<td>Focus the slider handle after a value changes</td>
</tr>
<tr>
<td><a href="#example-17">Example 17</a></td>
<td>Unusual tooltip positions</td>
</tr>
<tr>
<td><a href="#example-18">Example 18</a></td>
<td>Accessibility with ARIA labels</td>
</tr>
<tr>
<td><a href="#example-19">Example 19</a></td>
<td>Auto-Register data-provide="slider" Elements</td>
</tr>
<tr>
<td><a href="#example-20">Example 20</a></td>
<td>Slider-Elements initially hidden</td>
</tr>
<tr>
<td><a href="#example-21">Example 21</a></td>
<td>Create an input element with the <strong>data-provide="slider"</strong> attribute automatically turns it into a slider. Options can be supplied via <strong>data-slider-</strong> attributes</td>
</tr>
<tr>
<td><a href="#example-22">Example 22</a></td>
<td>Highlight ranges on slider with <strong>rangeHighlights</strong> attribute</td>
</tr>
<tr>
<td><a href="#example-23">Example 23</a></td>
<td>Using tick marks at specific positions</td>
</tr>
<tr>
<td><a href="#example-24">Example 24</a></td>
<td>rtl mode (auto)</td>
</tr>
<tr>
<td><a href="#example-25">Example 25</a></td>
<td>Lock selection to ticks</td>
</tr>
<tr>
<td><a href="#example-26">Example 26</a></td>
<td>Refresh method with optional `options` object</td>
</tr>
</table>
<div class="examples">
<div id="example-1" class='slider-example'>
<h3>Example 1: <a href="#top"><small>Back to Top</small></a></h3>
<p>Basic example with custom formatter and colored selected region via CSS.</p>
<div class="well">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
// Without JQuery
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value;
}
});
</code></pre>
<h5>CSS</h5>
<pre><code class="css">
#ex1Slider .slider-selection {
background: #BABABA;
}
</code></pre>
</div>
<div id="example-2" class='slider-example'>
<h3>Example 2: <a href="#top"><small>Back to Top</small></a></h3>
<p>Range selector, options specified via data attribute.</p>
<div class="well">
Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>
</div>
<h5>HTML</h5>
<pre><code class="html">
Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex2").slider({});
// Without JQuery
var slider = new Slider('#ex2', {});
</code></pre>
</div>
<div id="example-3" class='slider-example'>
<h3>Example 3: <a href="#top"><small>Back to Top</small></a></h3>
<p>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.</p>
<div class="well">
<p>
<b>R</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" />
</p>
<p>
<b>G</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
</p>
<p>
<b>B</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" />
</p>
<div id="RGB"></div>
</div>
<h5>HTML</h5>
<pre><code class="html">
<p>
<b>R</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" />
</p>
<p>
<b>G</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
</p>
<p>
<b>B</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" />
</p>
<div id="RGB"></div>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
var RGBChange = function() {
$('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
};
var r = $('#R').slider()
.on('slide', RGBChange)
.data('slider');
var g = $('#G').slider()
.on('slide', RGBChange)
.data('slider');
var b = $('#B').slider()
.on('slide', RGBChange)
.data('slider');
</code></pre>
<h5>CSS</h5>
<pre><code class="css">
#RGB {
height: 20px;
background: rgb(128, 128, 128);
}
#RC .slider-selection {
background: #FF8282;
}
#RC .slider-handle {
background: red;
}
#GC .slider-selection {
background: #428041;
}
#GC .slider-handle {
background: green;
}
#BC .slider-selection {
background: #8283FF;
}
#BC .slider-handle {
border-bottom-color: blue;
}
#R, #G, #B {
width: 300px;
}
</code></pre>
</div>
<div id="example-4" class='slider-example'>
<h3>Example 4: <a href="#top"><small>Back to Top</small></a></h3>
<p>Vertical Slider with reversed values (largest to smallest).</p>
<div class="well">
<input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex4").slider({
reversed : true
});
// Without JQuery
var slider = new Slider("#ex4", {
reversed : true
});
</code></pre>
</div>
<div id="example-5" class='slider-example'>
<h3>Example 5: <a href="#top"><small>Back to Top</small></a></h3>
<p>Destroy instance of slider by calling destroy() method on slider instance via JavaScript.</p>
<div class="well">
<input id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/>
<button id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy</button>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/>
<button id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy</button>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex5").slider();
// Without JQuery
var slider = new Slider('#ex5');
$("#destroyEx5Slider").click(function() {
// With JQuery
$("#ex5").slider('destroy');
// Without JQuery
slider.destroy();
});
</code></pre>
</div>
<div id="example-6" class='slider-example'>
<h3>Example 6: <a href="#top"><small>Back to Top</small></a></h3>
<p>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.</p>
<div class="well">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
});
</code></pre>
</code></pre>
</div>
<div id="example-7" class='slider-example'>
<h3>Example 7: <a href="#top"><small>Back to Top</small></a></h3>
<p>Sliders can be enabled and disabled.</p>
<div class="well">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex7").slider();
// Without JQuery
var slider = new Slider("#ex7");
$("#ex7-enabled").click(function() {
if(this.checked) {
// With JQuery
$("#ex7").slider("enable");
// Without JQuery
slider.enable();
}
else {
// With JQuery
$("#ex7").slider("disable");
// Without JQuery
slider.disable();
}
});
</code></pre>
</div>
<div id="example-8" class='slider-example'>
<h3>Example 8: <a href="#top"><small>Back to Top</small></a></h3>
<p>Tooltip can always be displayed.</p>
<div class="well">
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex8").slider({
tooltip: 'always'
});
// Without JQuery
var slider = new Slider("#ex8", {
tooltip: 'always'
});
</code></pre>
</div>
<div id="example-9" class='slider-example'>
<h3>Example 9: <a href="#top"><small>Back to Top</small></a></h3>
<p>Precision (number of places after the decimal) can be specified.</p>
<div class="well">
<input id="ex9" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex9" type="text"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex9").slider({
precision: 2,
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
// Without JQuery
var slider = new Slider("#ex9", {
precision: 2,
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
</code></pre>
</div>
<div id="example-10" class='slider-example'>
<h3>Example 10: <a href="#top"><small>Back to Top</small></a></h3>
<p>Setting custom handlers.</p>
<div class="well">
<input id="ex10" type="text" data-slider-handle="custom"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex10" type="text" data-slider-handle="custom"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex10").slider({});
// Without JQuery
var slider = new Slider("#ex10", {});
</code></pre>
<h5>CSS</h5>
<pre><code class="css">
.slider-handle.custom {
background: transparent none;
/* You can customize the handle and set a background image */
}
/* Or display content like unicode characters or fontawesome icons */
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605'; /*unicode star character*/
color: #726204;
}
</code></pre>
</div>
<div id="example-11" class='slider-example'>
<h3>Example 11: <a href="#top"><small>Back to Top</small></a></h3>
<p>Using a custom step interval.</p>
<div class="well">
<input id="ex11" type="text" data-slider-handle="custom"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex11" type="text" data-slider-handle="custom"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex11").slider({step: 20000, min: 0, max: 200000});
// Without JQuery
var slider = new Slider("#ex11", {
step: 20000,
min: 0,
max: 200000
});
</code></pre>
</div>
<div id="example-12" class='slider-example'>
<h3>Example 12: <a href="#top"><small>Back to Top</small></a></h3>
<p>Coloring the low and high track segments.</p>
<div class="well">
Single-value slider, high track:<br/>
<input id="ex12a" type="text"/><br/>
Note that there is no low track on the single-value slider. The
area lesser than the value of the handle is the selection.
<br/><br/>
Range slider, low track:<br/>
<input id="ex12b" type="text"/>
<br/><br/>
Range slider, low and high tracks, and selection:<br/>
<input id="ex12c" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<!-- Single-value slider, high track: -->
<input id="ex12a" type="text"/><br/>
Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.
<!-- Range slider, low track: -->
<input id="ex12b" type="text"/><br/>
<!-- Range slider, low and high tracks, and selection: -->
<input id="ex12c" type="text"/><br/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex12a").slider({ id: "slider12a", min: 0, max: 10, value: 5 });
$("#ex12b").slider({ id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
$("#ex12c").slider({ id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
// Without JQuery
var sliderA = new Slider("#ex12a", { id: "slider12a", min: 0, max: 10, value: 5 });
var sliderB = new Slider("#ex12b", { id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
var sliderC = new Slider("#ex12c", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
</code></pre>
<h5>CSS</h5>
<pre><code class="css">
#slider12a .slider-track-high, #slider12c .slider-track-high {
background: green;
}
#slider12b .slider-track-low, #slider12c .slider-track-low {
background: red;
}
#slider12c .slider-selection {
background: yellow;
}
</code></pre>
</div>
<div id="example-13" class='slider-example'>
<h3>Example 13: <a href="#top"><small>Back to Top</small></a></h3>
<p>Using tick marks and labels.</p>
<div class="well">
<input id="ex13" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex13" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex13").slider({
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
// Without JQuery
var slider = new Slider("#ex13", {
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
</code></pre>
</div>
<div id="example-14" class='slider-example'>
<h3>Example 14: <a href="#top"><small>Back to Top</small></a></h3>
<p>Using tick marks at specific positions.</p>
<div class="well">
<input id="ex14" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex14" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]' data-slider-ticks-positions="[0, 30, 70, 90, 100]" />
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex14").slider({
ticks: [0, 100, 200, 300, 400],
ticks_positions: [0, 30, 70, 90, 100],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
// Without JQuery
var slider = new Slider("#ex14", {
ticks: [0, 100, 200, 300, 400],
ticks_positions: [0, 30, 70, 90, 100],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
</code></pre>
</div>
<div id="example-15" class='slider-example'>
<h3>Example 15: <a href="#top"><small>Back to Top</small></a></h3>
<p>With a logarithmic scale.</p>
<div class="well">
<input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex15").slider({
min: 1000,
max: 10000000,
scale: 'logarithmic',
step: 10
});
// Without JQuery
var slider = new Slider('#ex15', {
min: 1000,
max: 10000000,
scale: 'logarithmic',
step: 10
});
</code></pre>
</div>
<div id="example-16" class="slider-example">
<h3>Example 16: <a href="#top"><small>Back to Top</small></a></h3>
<p>Focus the slider handle after a value change.</p>
<div class="well">
Single-value slider:<br/>
<input id="ex16a" type="text"/><br/>
<br/><br/>
Range slider:<br/>
<input id="ex16b" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<!-- Single-value slider: -->
<input id="ex16a" type="text"/><br/>
<!-- Range slider: -->
<input id="ex16b" type="text"/><br/>
Note that the slider handle that caused the value change is focused.
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex16a").slider({ min: 0, max: 10, value: 0, focus: true });
$("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true });
// Without JQuery
var sliderA = new Slider("#ex16a", { min: 0, max: 10, value: 0, focus: true });
var sliderB = new Slider("#ex16b", { min: 0, max: 10, value: [0, 10], focus: true });
</code></pre>
</div>
<div id="example-17" class="slider-example">
<h3>Example 17: <a href="#top"><small>Back to Top</small></a></h3>
<p>Unusual tooltip positions.</p>
<div class="well">
Horizontal slider with tooltip on the bottom<br/><br/>
<input id="ex17a" type="text"/><br/><br/><br/>
Vertical slider with tooltip on the left<br/><br/>
<input id="ex17b" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex17a" type="text"/>
<input id="ex17b" type="text"/>
</code></pre>
<h5>JS</h5>
<pre><code class="js">
// With JQuery
$("#ex17a").slider({
min: 0,
max: 10,
value: 0,
tooltip_position:'bottom'
});
$("#ex17b").slider({
min: 0,
max: 10,
value: 0,
orientation: 'vertical',
tooltip_position:'left'
});
// Without JQuery
var sliderA = new Slider("#ex17a", {
min: 0,
max: 10,
value: 0,
tooltip_position:'bottom'
});
var sliderB = new Slider("#ex17b", {
min: 0,
max: 10,
value: 0,
orientation: 'vertical',
tooltip_position:'left'
});
</code></pre>
</div>
<div id="example-18" class="slider-example">
<h3>Example 18: <a href="#top"><small>Back to Top</small></a></h3>
<p>Accessibility with ARIA labels.</p>
<div class="well">
Slider with single value and label:<br/><br/>
<span id="ex18-label-1" class="hidden">
Example slider label
</span>
<input id="ex18a" type="text" /><br/><br/><br/>
Range slider with multiple labels:<br/><br/>
<span id="ex18-label-2a" class="hidden">
Example low value
</span>
<span id="ex18-label-2b" class="hidden">
Example high value
</span>
<input id="ex18b" type="text" />
</div>
<h5>HTML</h5>
<pre><code class="html">
<span id="ex18-label-1" class="hidden">Example slider label</span>
<input id="ex18a" type="text"/>
<span id="ex18-label-2a" class="hidden">Example low value</span>
<span id="ex18-label-2b" class="hidden">Example high value</span>
<input id="ex18b" type="text"/>
</pre></code>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex18a").slider({
min: 0,
max: 10,
value: 5,
labelledby: 'ex18-label-1'
});
$("#ex18b").slider({
min: 0,
max: 10,
value: [3, 6],
labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
// Without JQuery
var sliderA = new Slider("#ex18a", {
min: 0,
max: 10,
value: 5,
labelledby: 'ex18-label-1'
});
var sliderB = new Slider("#ex18b", {
min: 0,
max: 10,
value: [3, 6],
labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
</pre></code>
</div>
<div id="example-19" class="slider-example">
<h3>Example 19: <a href="#top"><small>Back to Top</small></a></h3>
<p>Auto-Register data-provide="slider" Elements.</p>
<div class="well">
Slider-Element not accompanied by any custom Javascript:<br/><br/>
<span id="ex18-label-1" class="hidden">
Example slider label
</span>
<input id="ex19" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
</div>
<h5>HTML</h5>
<pre><code class="html">
<span id="ex18-label-1" class="hidden">Example slider label</span>
<input id="ex19" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
</pre></code>
</div>
<div id="example-20" class="slider-example">
<h3>Example 20: <a href="#top"><small>Back to Top</small></a></h3>
<p>Slider-Elements initially hidden.</p>
<a class="btn btn-primary" href="" id="ex20a">Show</a>
<br><br>
<div class="well" style="display: none">
Slider-Element initially hidden, revealed by Javascript:<br/><br/>
<span id="ex18-label-1" class="hidden">
Example slider label
</span>
<input id="ex20" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
</div>
<h5>HTML</h5>
<pre><code class="html">
<a class="btn btn-primary" href="" id="ex20a">Show</a>
<div class="well" style="display: none">
<span id="ex18-label-1" class="hidden">Example slider label</span>
<input id="ex19" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
</div>
</pre></code>
<h5>JavaScript</h5>
<pre><code class="js">
$('#ex20a').on('click', function(e) {
$('#ex20a')
.parent()
.find(' >.well')
.toggle()
.find('input')
.slider('relayout');
e.preventDefault();
});
</pre></code>
</div>
<div id="example-21" class="slider-example">
<h3>Example 21: <a href="#top"><small>Back to Top</small></a></h3>
<p>Create an input element with the <strong>data-provide="slider"</strong> attribute automatically turns it into a slider. Options can be supplied via <strong>data-slider-</strong> attributes.</p>
<div class="well">
<input id="ex21" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex21" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide" />
</pre></code>
</div>
<div id="example-22" class="slider-example">
<h3>Example 22: <a href="#top"><small>Back to Top</small></a></h3>
<p>Highlight ranges on slider with <strong>rangeHighlights</strong> attribute.</p>
<div class="well">
<input id="ex22" type="text"
data-slider-id="slider22"
data-slider-min="0"
data-slider-max="20"
data-slider-step="1"
data-slider-value="14"
data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
{ "start": 7, "end": 8, "class": "category2" },
{ "start": 17, "end": 19 },
{ "start": 17, "end": 24 },
{ "start": -3, "end": 19 }]'/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex22" type="text"
data-slider-id="slider22"
data-slider-min="0"
data-slider-max="20"
data-slider-step="1"
data-slider-value="14"
data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
{ "start": 7, "end": 8, "class": "category2" },
{ "start": 17, "end": 19 },
{ "start": 17, "end": 24 }, //not visible - out of slider range
{ "start": -3, "end": 19 }]' />
</pre></code>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$('#ex22').slider({
id: 'slider22',
min: 0,
max: 20,
step: 1,
value: 14,
rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
{ "start": 7, "end": 8, "class": "category2" },
{ "start": 17, "end": 19 },
{ "start": 17, "end": 24 },
{ "start": -3, "end": 19 }]});
// Without JQuery
var slider = new Slider("#ex22", {
id: 'slider22',
min: 0,
max: 20,
step: 1,
value: 14,
rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
{ "start": 7, "end": 8, "class": "category2" },
{ "start": 17, "end": 19 },
{ "start": 17, "end": 24 },
{ "start": -3, "end": 19 }]});
</pre></code>
<h5>CSS</h5>
<pre><code class="css">
#slider22 .slider-selection {
background: #81bfde;
}
#slider22 .slider-rangeHighlight {
background: #f70616;
}
#slider22 .slider-rangeHighlight.category1 {
background: #FF9900;
}
#slider22 .slider-rangeHighlight.category2 {
background: #99CC00;
}
</pre></code>
</div>
<div id="example-23" class='slider-example'>
<h3>Example 23: <a href="#top"><small>Back to Top</small></a></h3>
<p>Using tick marks at specific positions.</p>
<div class="well">
<input id="ex23" type="text"/>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex23" type="text" data-slider-ticks="[0, 1, 2, 3, 4]" data-slider-step="0.01" data-slider-ticks-snap-bounds="200" data-slider-ticks-tooltip="true" ticks_positions="[0, 30, 60, 70, 90, 100]" />
</pre></code>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex23").slider({
ticks: [0, 1, 2, 3, 4],
ticks_positions: [0, 30, 60, 70, 90, 100],
ticks_snap_bounds: 200,
formatter: function(value) {
return 'Current value: ' + value;
},
ticks_tooltip: true,
step: 0.01
});
// Without JQuery
var slider = new Slider("#ex23", {
ticks: [0, 1, 2, 3, 4],
ticks_positions: [0, 30, 70, 90, 100],
ticks_snap_bounds: 200,
formatter: function(value) {
return 'Current value: ' + value;
},
ticks_tooltip: true,
step: 0.01
});
</pre></code>
</div>
<div id="example-24" class='slider-example'>
<h3>Example 24: <a href="#top"><small>Back to Top</small></a></h3>
<p>rtl mode (auto).</p>
<div class='well' dir ="rtl">
<span>-5</span>
<input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<span>20</span>
</div>
<h5>HTML</h5>
<pre><code class="html">
<div class='well' dir ="rtl">
<span>-5</span>
<span>20</span>
<input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
</div>
</pre></code>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex24").slider({});
</pre></code>
</div>
<div id="example-25" class='slider-example'>
<h3>Example 25: <a href="#top"><small>Back to Top</small></a></h3>
<p>Lock selection to ticks</p>
<div class="well">
<input id="ex25" type="text" />
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex25" type="text" data-slider-value="[1, 100]" data-slider-ticks="[1, 50, 100]" data-slider-lock-to-ticks="true"/>
</pre></code>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$("#ex25").slider({
value: [1, 100],
ticks: [1, 50, 100],
lock_to_ticks: true
});
</pre></code>
</div>
<div id="example-26" class='slider-example'>
<h3>Example 26: <a href="#top"><small>Back to Top</small></a></h3>
<p>Refresh method with optional `options` object</p>
<div class="well">
<input id="ex26" data-slider-id="ex26Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="10"/>
<button id="ex26_Refresh" class='btn btn-primary'>Refresh</button>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ex26_UseCurrentVal">
<label class="form-check-label" for="ex26_UseCurrentVal">
Use Current Value
</label>
</div>
</div>
<h5>HTML</h5>
<pre><code class="html">
<input id="ex26" data-slider-id="ex26Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="10"/>
</code></pre>
<h5>JavaScript</h5>
<pre><code class="js">
// With JQuery
$('#ex26').slider('refresh', { useCurrentValue: true });
// Without JQuery
var slider = new Slider('#ex26');
slider.refresh({ useCurrentValue: true });
</code></pre>
</div> <!-- /example-26 -->
</div> <!-- /examples -->
</div> <!-- /container -->
<!-- core JavaScript
================================================== -->
<script type='text/javascript' src="<%= js.jquery %>"></script>
<script type='text/javascript' src="<%= js.slider %>"></script>
<script type='text/javascript' src="<%= js.highlightjs %>"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type='text/javascript'>
$(document).ready(function() {
/* Example 1 */
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
/* Example 2 */
$("#ex2").slider({});
/* Example 3 */
var RGBChange = function() {
$('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
};
var r = $('#R').slider()
.on('slide', RGBChange)
.data('slider');
var g = $('#G').slider()
.on('slide', RGBChange)
.data('slider');
var b = $('#B').slider()
.on('slide', RGBChange)
.data('slider');
/* Example 4 */
$("#ex4").slider({
reversed : true
});
/* Example 5 */
$("#ex5").slider();
$("#destroyEx5Slider").click(function() {
$("#ex5").slider('destroy');
});
/* Example 6 */
$("#ex6").slider();
$("#ex6").on('slide', function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
/* Example 7 */
$("#ex7").slider();
$("#ex7-enabled").click(function() {
if(this.checked) {
$("#ex7").slider("enable");
}
else {
$("#ex7").slider("disable");
}
});
/* Example 8 */
$("#ex8").slider({
tooltip: 'always'
});
/* Example 9 */
$("#ex9").slider({
precision: 2,
value: 8.115
});
/* Example 10 */
$("#ex10").slider({});
/* Example 11 */
$("#ex11").slider({
step: 20000,
min: 0,
max: 200000
});
/* Example 12 */
$("#ex12a").slider({
id: "slider12a",
min: 0,
max: 10,
value: 5
});
$("#ex12b").slider({
id: "slider12b",
min: 0,
max: 10,
range: true,
value: [ 3, 7 ]
});
$("#ex12c").slider({
id: "slider12c",
min: 0,
max: 10,
range: true,
value: [ 3, 7 ]
});
/* Example 13 */
$("#ex13").slider({
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30,
value: 200
});
/* Example 14 */
$("#ex14").slider({
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_positions: [0, 30, 70, 90, 100],
ticks_snap_bounds: 20,
value: 200,
});
/* Example 15 */
$("#ex15").slider({
min: 10,
max: 1000,
scale: 'logarithmic',
step: 10
});
/* Example 16 */
$("#ex16a").slider({
min : 0,
max : 10,
value: 0,
focus: true
});
$("#ex16b").slider({
min : 0,
max : 10,
value: [ 0, 10 ],
focus: true
});
/* Example 17 */
$("#ex17a").slider({
min : 0,
max : 10,
value: 0,
tooltip_position:'bottom'
});
$("#ex17b").slider({
min : 0,
max : 10,
value: 0,
orientation: 'vertical',
tooltip_position:'left'
});
/* Example 18 */
$('#ex18a').slider({
min : 0,
max : 10,
value: 5,
labelledby: 'ex18-label-1'
});
$('#ex18b').slider({
min : 0,
max : 10,
value: [3, 6],
labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
$('#ex20a').on('click', function(e) {
$('#ex20a')
.parent()
.find(' >.well')
.toggle()
.find('input')
.slider('relayout');
e.preventDefault();
});
/* Example 22 */
$('#ex22').slider({});
/* Example 23 */
$('#ex23').slider({
ticks: [0, 1, 2, 3, 4],
ticks_positions: [0, 30, 70, 90, 100],
formatter: function(value) {
return 'Current value: ' + value;
},
step: 0.01,
ticks_tooltip: true
});
/* example 24 */
$('#ex24').slider({});
/* example 25 */
$("#ex25").slider({
value: [1, 100],
ticks: [1, 50, 100],
lock_to_ticks: true
});
/* example 26 */
$('#ex26').slider();
$('#ex26_Refresh').on('click', function() {
if ($('#ex26_UseCurrentVal').prop('checked')) {
$('#ex26').slider('refresh', { useCurrentValue: true });
}
else {
$('#ex26').slider('refresh');
}
});
});
</script>
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>