Range Slider

A lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. Fast and has no dependencies.

Documentation for noUiSlider

Default

<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">&lt;link href=&quot;vendors/nouislider/nouislider.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
<link href="vendors/nouislider/nouislider.min.css" rel="stylesheet" />

Javascript

<pre><code class="language-html">&lt;script src=&quot;vendors/nouislider/nouislider.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="vendors/nouislider/nouislider.min.js"></script>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.1

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize