JavaScript: How to create a custom range slider using bootstrap-slider

This article describes how to create a custom HTML range slider using Bootstrap 3, jQuery, HTML, CSS, and a JavaScript package called “bootstrap-slider”.  There are download and installation instructions for this package on github.

This slider can be custom styled with CSS and comes with a built-in tooltip. See the graphic below for a description of the different parts of the slider.

Step 1: Set up CDNs

The first thing we need in our HTML document is to set up CDNs to Bootstrap 3, jQuery, bootstrap-slider .js file and bootstrap-slider .css file. For example:

<!-- Bootstrap 3 CSS  -->
<link rel="stylesheet" href="">

<!-- jQuery  -->
<script src=""></script>

<!-- bootstrap-slider js + css  -->
<script src=""></script>
<link rel="stylesheet" href="" />

Bootstrap 3:


bootstrap-slider files:

Note: The Bootstrap 3 and jQuery CDNs should be declared before the bootstrap-slider files.


Step 2: Set up 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"/>

To make the slider, set up a”type=text” input tag with some slider arguments such as:

  • data-slider-id (the name of the slider)
  • data-slider-min (the minimum value in the range)
  • data-slider-max (the maximum value in the range)
  • data-slider-step (increment by units of this number)
  • data-slider-value (a starting value for the slider)


Step 3: Set up custom CSS

Instead of pasting all of the custom CSS code here, I will embed a slider I saved in Codepen:

See the Pen Bootstrap-slider with tooltip always visible by Chris Nielsen (@Chris_Nielsen) on CodePen.0


As seen in this codepen, you can customize details such as slider color, height, length, handle size and tooltip.


Step 4: Instantiate the slider with jQuery or JavaScript

Here is some JavaScript that will make it so that the tooltip is always visible (as seen in the above codepen):

// Without JQuery
var slider = new Slider("#ex1", {
   tooltip: 'always'

Or, if you only want to see the tooltip when dragging the handle, here is some jQuery:

  formatter: function(value) {
    return value;

For example:

See the Pen Bootstrap-slider with tooltip by Chris Nielsen (@Chris_Nielsen) on CodePen.0


For more information on bootstrap-slider, see:

For more information about HTML range sliders, see: