Sliders v14.5.0

We restyled noUIslider, while keeping the design consistent. You can use other classes for colors like .slider-info, .slider-success, .slider-warning, .slider-danger.

For more information please check Full Github Documentation.

<!-- Markup -->
<div id="sliderRegular" class="slider"></div>
<br><br>
<div id="sliderDouble" class="slider slider-info"></div>

<!-- Javascript -->
var softSlider = document.getElementById('sliderRegular');
noUiSlider.create(softSlider, {
  start: 50,
  range: {
    min: 0,
    max: 100
  }
});

var nonLinearSlider = document.getElementById('sliderDouble');

noUiSlider.create(nonLinearSlider, {
  connect: true,
  behaviour: 'tap',
  start: [10000, 500000],
  range: {
    // Starting at 500, step the value by 500,
    // until 4000 is reached. From there, step by 1000.
    'min': [0],
    '10%': [10000],
    '50%': [50000],
    'max': [1000000]
  }
});