7 styles of Simple and Range Bootstrap Sliders Using jQuery/JavaScript

The Bootstrap Slider component using jQuery

By using the bootstrap-slider plug-in, jQuery based, you may create the simple or range slider with different styles in web pages. Easily integrate this into the forms for taking user’s input by way of sliding for selecting the value.

For example, selecting the age group, income range, salary expectation etc.

Demo1 Demo2 Demo3 Demo4
Developer page Download plug-in

How to install and use the slider plug-in?

The jQuery slider plugin for Bootstrap is available via Bower and npm besides CDN.

Install the plug-in via npm:

npm install bootstrap-slider

Install via Bower:

bower install seiyria-bootstrap-slider

By using CDN:

You may simply refer the CSS and JS files via CDN here.

See the demos below for code and how to use the plug-in.

A demo of simple slider

In the markup, you need to use the input type text. There, you may specify the minimum and maximum values along with the step and initial value for the slider by using the data attributes. Finally, initiate the plug-in via JavaScript/jQuery as shown below:

Bootstrap simple slider

See online demo and code

The markup for this example:

 

You can see, following data attributes are used:

  • For minimum value of the slider = data-slider-min
  • For maximum value = data-slider-max
  • Specify the step by = data-slider-step
  • Set the initial value by = data-slider-value

The jQuery code:

 

A little CSS for the background of the slider:

 

A demo of range slider without jQuery

You may also create the slider without using the jQuery. In this demo, a range slider is created and this is initiated via simple JavaScript. No jQuery library included:

Bootstrap slider

See online demo and code

The markup:

Again, this is just an input with a few data attributes. For the data-slider-value attribute, use the two values for both ranges.

The JavaScript:

 

Multiple sliders demo with event handling

You may use multiple sliders and perform certain actions via event handler based on the values of sliders. In this example, the RGB sliders are created for selecting the color codes.

After the three sliders for each (RGB), the fourth div displays the final color that will change dynamically, as you slide any of the three sliders. Have a look and experience yourself:

Bootstrap multiple slider

See online demo and code

See the output and complete code in the demo page.

A demo of creating vertical sliders

Just use the data-slider-orientation=”vertical” attribute in the input type text element for creating the vertical sliders. For specifying the min, max, and initial values, you will use the same attributes as used for horizontal sliders.

See this demo, where three sliders are created in the vertical direction. The background colors for the selected and unselected areas are also dealt by using the CSS:

Bootstrap vertical slider

See online demo and code

The markup:

 

The script:

 

An example of using ticks and labels in sliders

In certain scenarios, you may need to display benchmarks in a slider along with the description to let the user know and for reaching a certain level of the slider quickly.

See this demo where six tick marks with labels are created in a slider. You may set the ticks and labels by using the data attributes or JavaScript.

Bootstrap slider labels

See online demo and code

See the markup for using the data attributes:

 

In JavaScript, only the plug-in is initiated.

You may also set the values of ticks and labels via JavaScript. For the above demo, following JavaScript will produce the same result:

 

The markup will become:

<input id=”slider-tick-label” type=”text” />

Displaying tooltip always in the slider

In the above demos, you might notice the tooltip appears as you hover or slide, otherwise, it disappears. If you want always displaying the tooltip with current value then use the tooltip option in the jQuery code with value = true. See the demo below:

Bootstrap slider tooltip

See online demo and code

The markup:

 

 

The jQuery:

 

A little CSS:

 

Using custom handler demo

In all above demos, the slider is moved by using a circle of blue color. You may customize this and use your own custom style and color for that. For this demo, a star of greenish color is used for letting the user selecting the “rating”. Have a look:

Bootstrap slider star rating

See online demo and code

The CSS:

 

See the complete code on the demo page.

The plug-in has a plenty of options and functions along with other demos. Visit the developer page for learning more about this awesome plug-in.