Slider for Bootstrap bootstrap-slider.js

Examples for the bootstrap-slider component.

Now compatible with Bootstrap 4

Example Link Example Description
Example 1 Basic example with custom formatter and colored selected region via CSS
Example 2 Range selector, options specified via data attribute
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
Example 4 Vertical Slider with reversed values (largest to smallest)
Example 5 Destroy instance of slider by calling destroy() method on slider instance via JavaScript
Example 6 Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used
Example 7 Sliders can be enabled and disabled
Example 8 Tooltip can always be displayed
Example 9 Precision (number of places after the decimal) can be specified
Example 10 Setting custom handlers
Example 11 Using a custom step interval
Example 12 Coloring the low and high track segments
Example 13 Using tick marks and labels
Example 14 Using tick marks at specific positions
Example 15 With a logarithmic scale
Example 16 Focus the slider handle after a value changes
Example 17 Unusual tooltip positions
Example 18 Accessibility with ARIA labels
Example 19 Auto-Register data-provide="slider" Elements
Example 20 Slider-Elements initially hidden
Example 21 Create an input element with the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes
Example 22 Highlight ranges on slider with rangeHighlights attribute
Example 23 Using tick marks at specific positions
Example 24 rtl mode (auto)
Example 25 Lock selection to ticks
Example 26 Refresh method with optional `options` object

Example 1: Back to Top

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 JQuery
var slider = new Slider('#ex1', {
	formatter: function(value) {
		return 'Current value: ' + value;
	}
});
CSS

#ex1Slider .slider-selection {
	background: #BABABA;
}

Example 2: Back to Top

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 JQuery
var slider = new Slider('#ex2', {});

Example 3: Back to Top

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: Back to Top

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 JQuery
var slider = new Slider("#ex4", {
	reversed : true
});

Example 5: Back to Top

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 JQuery
var slider = new Slider('#ex5');

$("#destroyEx5Slider").click(function() {

	// With JQuery
	$("#ex5").slider('destroy');

	// Without JQuery
	slider.destroy();
});

Example 6: Back to Top

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"/>
<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 JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
	document.getElementById("ex6SliderVal").textContent = sliderValue;
});

Example 7: Back to Top

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 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();
	}
});

Example 8: Back to Top

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 JQuery
var slider = new Slider("#ex8", {
	tooltip: 'always'
});

Example 9: Back to Top

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 JQuery
var slider = new Slider("#ex9", {
	precision: 2,
	value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});

Example 10: Back to Top

Setting custom handlers.

HTML

<input id="ex10" type="text" data-slider-handle="custom"/>
JavaScript

// With JQuery
$("#ex10").slider({});

// Without JQuery
var 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: Back to Top

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 JQuery
var slider = new Slider("#ex11", {
	step: 20000,
	min: 0,
	max: 200000
});

Example 12: Back to Top

Coloring the low and high track segments.

Single-value slider, high track:

Note that there is no low track on the single-value slider. The area lesser than the value of the handle is the selection.
Range slider, low track:
Range slider, low and high tracks, and selection:
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/>
JavaScript

// 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] });
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;
}

Example 13: Back to Top

Using tick marks and labels.

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"]'/>
JavaScript

// 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
});

Example 14: Back to Top

Using tick marks at specific positions.

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]" />
JavaScript

// 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
});

Example 15: Back to Top

With a logarithmic scale.

HTML

<input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
JavaScript

// 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
});

Example 16: Back to Top

Focus the slider handle after a value change.

Single-value slider:
Range slider:
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.
JavaScript

// 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 });

Example 17: Back to Top

Unusual tooltip positions.

Horizontal slider with tooltip on the bottom
Vertical slider with tooltip on the left
HTML

<input id="ex17a" type="text"/>
<input id="ex17b" type="text"/>
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'
});

Example 18: Back to Top

Accessibility with labels only visible to screenreaders.

Slider with single value and label:
Example slider label
Range slider with multiple labels:
Example low value Example high value
HTML

<span id="ex18-label-1" class="sr-only">Example slider label</span>
<input id="ex18a" type="text"/>

<span id="ex18-label-2a" class="sr-only">Example low value</span>
<span id="ex18-label-2b" class="sr-only">Example high value</span>
<input id="ex18b" type="text"/>
JavaScript

// 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']
});

Example 19: Back to Top

Auto-Register data-provide="slider" Elements.

Slider-Element not accompanied by any custom Javascript:
Example slider label
HTML

 <span id="ex18-label-1" class="sr-only">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" />

Example 20: Back to Top

Slider-Elements initially hidden.

Show

HTML

 <a class="btn btn-primary" href="" id="ex20a">Show</a>
        <div class="card card-body mb-3" style="display: none">
            <span id="ex18-label-1" class="sr-only">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>
JavaScript

 $('#ex20a').on('click', function(e) {
      $('#ex20a')
          .parent()
          .find(' >.card')
          .toggleClass()
          .find('input')
          .slider('relayout');
      e.preventDefault();
  });

Example 21: Back to Top

Create an input element with the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.

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" />

Example 22: Back to Top

Highlight ranges on slider with rangeHighlights attribute.

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 }]' />
JavaScript

// 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 }]});
CSS

#slider22 .slider-selection {
	background: #81bfde;
}

#slider22 .slider-rangeHighlight {
	background: #f70616;
}

#slider22 .slider-rangeHighlight.category1 {
    background: #FF9900;
}

#slider22 .slider-rangeHighlight.category2 {
    background: #99CC00;
}

Example 23: Back to Top

Using tick marks at specific positions.

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]" />
JavaScript

// 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
});

Example 24: Back to Top

rtl mode (auto)

-5 20
HTML

  <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"/>
JavaScript

// With JQuery
$("#ex24").slider({});

Example 25: Back to Top

Lock selection to ticks

HTML

<input id="ex25" type="text" data-slider-value="[1, 100]" data-slider-ticks="[1, 50, 100]" data-slider-lock-to-ticks="true"/>
JavaScript

// With JQuery
$("#ex25").slider({
	value: [1, 100],
	ticks: [1, 50, 100],
	lock_to_ticks: true
});

Example 26: Back to Top

Refresh method with optional `options` object

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"/>
JavaScript

// With JQuery
$('#ex26').slider('refresh', { useCurrentValue: true });

// Without JQuery
var slider = new Slider('#ex26');
slider.refresh({ useCurrentValue: true });