## 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>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize