SMusatov
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531
							<!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="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/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">
&ltinput id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt
</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: &ltb&gt€ 10&lt/b&gt &ltinput id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/&gt &ltb&gt€ 1000&lt/b&gt
</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">
&ltp&gt
&ltb&gtR&lt/b&gt &ltinput 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" /&gt
&lt/p&gt
&ltp&gt
&ltb&gtG&lt/b&gt &ltinput 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" /&gt
&lt/p&gt
&ltp&gt
&ltb&gtB&lt/b&gt &ltinput 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" /&gt
&lt/p&gt
&ltdiv id="RGB"&gt&lt/div&gt
</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">
&ltinput id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/&gt
</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">
&ltinput id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/&gt
&ltbutton id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy&lt/button&gt
</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">
&ltinput id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&gt
&ltspan id="ex6CurrentSliderValLabel">Current Slider Value: &ltspan id="ex6SliderVal"&gt3&lt/span&gt&lt/span&gt
</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">
&ltinput id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/&gt
&ltinput id="ex7-enabled" type="checkbox"/&gt 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">
&ltinput id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt
</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">
&ltinput id="ex9" type="text"/&gt
</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">
&ltinput id="ex10" type="text" data-slider-handle="custom"/&gt
</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">
&ltinput id="ex11" type="text" data-slider-handle="custom"/&gt
</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">
&lt;!-- Single-value slider, high track: --&gt;
&ltinput id="ex12a" type="text"/&gt&ltbr/&gt
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.

&lt;!-- Range slider, low track: --&gt;
&ltinput id="ex12b" type="text"/&gt&ltbr/&gt

&lt;!-- Range slider, low and high tracks, and selection: --&gt;
&ltinput id="ex12c" type="text"/&gt&ltbr/&gt
</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">
&lt;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"]'/&gt;
</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">
&ltinput 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]" /&gt
</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">
&lt;input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" /&gt;
</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">
&lt;!-- Single-value slider: --&gt;
&ltinput id="ex16a" type="text"/&gt&ltbr/&gt

&lt;!-- Range slider: --&gt;
&ltinput id="ex16b" type="text"/&gt&ltbr/&gt
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">
&ltinput id="ex17a" type="text"/&gt
&ltinput id="ex17b" type="text"/&gt
</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">
&lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
&lt;input id="ex18a" type="text"/&gt;

&lt;span id="ex18-label-2a" class="hidden"&gt;Example low value&lt;/span&gt;
&lt;span id="ex18-label-2b" class="hidden"&gt;Example high value&lt;/span&gt;
&lt;input id="ex18b" type="text"/&gt;
</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">
 &lt;span id="ex18-label-1" class="hidden">Example slider label&lt;/span&gt;
        &lt;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" /&gt;
</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">
 &lt;a class="btn btn-primary" href="" id="ex20a">Show&lt;/a&gt;
        &lt;div class="well" style="display: none"&gt;
            &lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
            &lt;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" /&gt;
        &lt;/div&gt;
</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">
 &lt;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" /&gt;
</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">
&ltinput 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 }]' /&gt;
</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">
&ltinput 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]" /&gt
</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">
&lt;div class='well' dir ="rtl"&gt;
  &lt;span&gt;-5&lt;/span&gt;
  &lt;span&gt;20&lt;/span&gt;
    &lt;input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt;
&lt;/div&gt;
</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">
&lt;input id="ex25" type="text" data-slider-value="[1, 100]" data-slider-ticks="[1, 50, 100]" data-slider-lock-to-ticks="true"/&gt;
</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">
&lt;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"/&gt;
</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>