Range Slider
A lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. Fast and has no dependencies.
Documentation for noUiSliderDefault
<div data-nouislider="data-nouislider"></div>Range Connect
<div data-nouislider='{"start":[20,80],"connect":true}'></div>Colored Sliders
<div class="noUi-primary mb-4" data-nouislider='{"start":[45]}'></div>
<div class="noUi-success mb-4" data-nouislider='{"start":[35]}'></div>
<div class="noUi-info mb-4" data-nouislider='{"start":[40]}'></div>
<div class="noUi-warning mb-4" data-nouislider='{"start":[70]}'></div>
<div class="noUi-danger" data-nouislider='{"start":[65]}'></div>Styling
<div class="noUi-target-primary noUi-handle-primary noUi-slider-slim noUi-handle-circle px-0 mb-4" data-nouislider='{"start":[45]}'></div>
<div class="noUi-primary-lighter noUi-handle-primary noUi-slider-medium noUi-handle-circle px-1 mb-4" data-nouislider='{"start":[45]}'></div>
<div class="noUi-primary-lighter noUi-slider-large noUi-handle-primary noUi-handle-circle ps-5 pe-3" data-nouislider='{"range":{"min":0,"max":250},"start":[20,150],"connect":true}'></div>Stylesheet
<pre><code class="language-html"><link href="vendors/nouislider/nouislider.min.css" rel="stylesheet" /></code></pre><link href="vendors/nouislider/nouislider.min.css" rel="stylesheet" />Javascript
<pre><code class="language-html"><script src="vendors/nouislider/nouislider.min.js"></script></code></pre><script src="vendors/nouislider/nouislider.min.js"></script>
