Example 1:

Basic example with custom formatter and colored selected region via CSS.

###################       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"/>###################    JavaScript###################// With JQuery$('#ex1').slider({	formatter: function(value) {		return 'Current value: ' + value;	}});// Without JQueryvar slider = new Slider('#ex1', {	formatter: function(value) {		return 'Current value: ' + value;	}});###################       CSS####################ex1Slider .slider-selection {	background: #BABABA;}

Example 2:

Range selector, options specified via data attribute.

Filter by price interval: € 10€ 1000
###################       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>###################    JavaScript###################// With JQuery$("#ex2").slider({});// Without JQueryvar slider = new Slider('#ex2', {});

Example 3:

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.

R

G

B

###################       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>###################    JavaScript###################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');###################       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;}

Example 4:

Vertical Slider with reversed values (largest to smallest).

###################       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"/>###################    JavaScript###################// With JQuery$("#ex4").slider({	reversed : true});// Without JQueryvar slider = new Slider("#ex4", {	reversed : true});

Example 5:

Destroy instance of slider by calling destroy() method on slider instance via JavaScript.

###################       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>###################    JavaScript###################// With JQuery$("#ex5").slider();// Without JQueryvar slider = new Slider('#ex5');$("#destroyEx5Slider").click(function() {		// With JQuery	$("#ex5").slider('destroy');	// Without JQuery	slider.destroy();});

Example 6:

Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.

Current Slider Value: 3
###################       HTML###################<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&t<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>###################    JavaScript###################// With JQuery$("#ex6").slider();$("#ex6").on("slide", function(slideEvt) {	$("#ex6SliderVal").text(slideEvt.value);});// Without JQueryvar slider = new Slider("#ex6");slider.on("slide", function(slideEvt) {	$("#ex6SliderVal").text(slideEvt.value);});)

Example 7:

Sliders can be enabled and disabled.

Enabled
###################       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###################    JavaScript###################// With JQuery$("#ex7").slider();// Without JQueryvar 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();	}});

Example 8:

Tooltip can always be displayed.

###################       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"/>###################    JavaScript###################// With JQuery$("#ex8").slider({	tooltip: 'always'});// Without JQueryvar slider = new Slider("#ex8", {	tooltip: 'always'});

Example 9:

Precision (number of places after the decimal) can be specified.

###################       HTML###################<input id="ex9" type="text"/>###################    JavaScript###################// With JQuery$("#ex9").slider({	precision: 2,	value: 8.115 // Slider will instantiate showing 8.12 due to specified precision});// Without JQueryvar slider = new Slider("#ex9", {	precision: 2,	value: 8.115 // Slider will instantiate showing 8.12 due to specified precision});

Example 10:

Setting custom handlers.

################### HTML###################<input id="ex10" type="text" data-slider-handle="custom"/>###################JavaScript###################// With JQuery$("#ex10").slider({});// Without JQueryvar slider = new Slider("#ex10", {});################### 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;}

Example 11:

Using a custom step interval.

###################HTML###################<input id="ex11" type="text" data-slider-handle="custom"/>###################JavaScript###################// With JQuery$("#ex11").slider({step: 20000, min: 0, max: 200000});// Without JQueryvar slider = new Slider("#ex11", {	step: 20000,	min: 0,	max: 200000});