W3CoreUI

noUISlider.

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs. Click here

Basic slider

The start option sets the number of handles and corresponding start positions.


<div id="slider-start"></div>

Step

By default, the slider slides fluently. In order to make the handles jump between intervals, the step option can be used.


<div id="slider-step"></div>
<span class="example-val" id="slider-step-value"></span>

Tooltips

noUiSlider can provide a basic tooltip using the tooltips option.


<div id="slider-tooltips"></div>

Limit

The limit option is the opposite of the margin option, limiting the maximum distance between two handles.

Value:


<div id="slider-limit"></div>
<div class="clearfix">Value: <span class="example-val" id="slider-limit-value-min"></span></div>
<div class="clearfix">Value: <span class="example-val" id="slider-limit-value-max"></span></div>

Interacting with pips

When using the pips feature, several interactions can be added. Pips can also be styled.


<div class="mb-5">
	<div id="active-pip"></div>
</div>

Orientation

The orientation setting can be used to set the slider to "vertical" or "horizontal".


<div id="slider-vertical" class="slider-vertical"></div>

Working with dates

This example shows how to convert dates to numerical ranges, and then use the update event to display them.


<div id="slider-date"></div>
<div class="mb-1"><span class="example-val" id="event-start"></span></div>
<div class="mb-1"><span class="example-val" id="event-end"></span></div>

Colored Connect Elements

noUiSlider's connect elements can be individually colored or otherwise styled.


<div class="slider" id="slider-color"></div>

Soft limits

To disable the edges of a slider, the set event can be used to reset the value if a limit is passed. Note how the handle 'bounces back' when it is released below 20 or above 80. noUiSlider also supports disabling edges altogether, which can be done using the padding option.


<div class="pb-5">
	<div id="soft"></div>
</div>

Colorpicker

We'll initialize all sliders with the same options, and use the update callback to keep to color in sync with the slider values. This callback fires any time a slider value updates.


<div class="colorpicker-slider">
	<div class="sliders" id="red"></div>
	<div class="sliders" id="green"></div>
	<div class="sliders" id="blue"></div>
	<div id="result"></div>
</div>