Slider usage

There are a couple of different sliders you can use with different styling. There is the default slider and the slider which adds more elements with JS. The default slider is made to only use the HTML5 <input type="range">. The sliders look the best in Chrome and Firefox. Both browsers support styling without additional classes but won't support all styling. When using .slider class you get different styling for range track lower and upper parts. You also get different styling depending on value. When you also use the slider-discrete you get the bubble as well. For IE/ Edge the slider-discrete will work the best.

The disabled styling is also supported.

	    
<input type="range" class="slider">
<input type="range" disabled value="0" class="slider">
<input type="range" disabled class="slider">
<input type="range" min="0" max="200" class="slider slider-discrete">
<input type="range" disabled class="slider slider-discrete">
	    
    

Default slider

The default slider can be made in 2 ways. Using default range input or by adding a class .slider. Adding the class will give more customizing abilities. Of course for both ways there is also disabled styling.

	
<input type="range">
<input type="range" disabled>
<input type="range" class="slider">
<input type="range" disabled class="slider">
	

Discrete slider

Using the discrete slider will add a "bubble" showing the value. The discrete slider also supports disabled styling. Note the discrete slider still has some bugs.

		
<input type="range" min="0" max="200" class="slider slider-discrete">
<input type="range" disabled class="slider slider-discrete">
		
	

Resources