Slider for Bootstrap Examples Page

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:

Range slider with multiple labels:

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:

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

Use Current Value

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

Slider for Bootstrap bootstrap-slider.js

Launch faster using 500+ professionally designed and customizable UI elements for Bootstrap 5.

Example 1: Back to Top

HTML

JavaScript

CSS

Example 2: Back to Top

HTML

JavaScript

Example 3: Back to Top

HTML

JavaScript

CSS

Example 4: Back to Top

HTML

JavaScript

Example 5: Back to Top

HTML

JavaScript

Example 6: Back to Top

HTML

JavaScript

Example 7: Back to Top

HTML

JavaScript

Example 8: Back to Top

HTML

JavaScript

Example 9: Back to Top

HTML

JavaScript

Example 10: Back to Top

HTML

JavaScript

CSS

Example 11: Back to Top

HTML

JavaScript

Example 12: Back to Top

HTML

JavaScript

CSS

Example 13: Back to Top

HTML

JavaScript

Example 14: Back to Top

HTML

JavaScript

Example 15: Back to Top

HTML

JavaScript

Example 16: Back to Top

HTML

JavaScript

Example 17: Back to Top

HTML

JS

Example 18: Back to Top

HTML

JavaScript

Example 19: Back to Top

HTML

Example 20: Back to Top

HTML

JavaScript

Example 21: Back to Top

HTML

Example 22: Back to Top

HTML

JavaScript

CSS

Example 23: Back to Top

HTML

JavaScript

Example 24: Back to Top

HTML

JavaScript

Example 25: Back to Top

HTML

JavaScript