Forms

Slider

Lightweight JavaScript range slider library with full multi-touch support.

Requirements

// Css
<link rel="stylesheet" href="css/vendor/nouislider.min.css" />

// Javascript
<script src="js/vendor/nouislider.min.js"></script>

Example

Javascript
var slider = noUiSlider.create(document.getElementById('sliderHorizontalBasic'), {
  start: [20],
  connect: [true, false],
  range: {min: 0, max: 100},
});
Html
<div>
  <label class="form-label">Slider</label>
  <div id="sliderHorizontalBasic"></div>
</div>

More Examples

You may find more examples in Interface.Forms.Controls.Slider.html file which is initialized by js/forms/controls.slider.js.

Documentation