Handles

The number of handles can be set using the start option. This option accepts an array of initial handle positions. Set one value for one handle, two values for two handles.

Range

All values on the slider are part of a range. The range has a minimum and maximum value.

Value: 

Stepping and snapping to values

The amount the slider changes on movement can be set using the step option.

Value: 

Non-linear sliders

Advanced Feature

he slider at certain intervals. Note how the handle in the example below starts at 30% of the slider width, even though 4000 is not 30% of the span between 2000 and 10000.

Value: 

Stepping in non-linear sliders

For every subrange in a non-linear slider, stepping can be set. Note how in the example below the slider doesn't step until it reaches 500 . From there on, it changes in increments of 500 , until it reaches 4000 , where increments now span 1000 .

Value: 

Snapping between steps

When a non-linear slider has been configured, the snap option can be set to true to force the slider to jump between the specified values.

Value: 

Value: 

Many application interfaces have options that can be turned on or off using switches. noUiSlider is well suited for this, especially because of the wide touch support.

The serialization option can be used to keep track of changes to the handle. We'll set the range to [0, 1] , which leaves one step of 1 .

noUiSlider offers several ways to listen to interaction: 'change' , 'set' and 'slide' . You can use these events all at the same time.

We'll initialize all sliders with the same options, and use the slide callback to keep to color in sync with the slider values. This callback fires when the slider is moved by sliding, or when it is clicked or tapped.

noUiSlider is perfectly fine serializing values to any element with a .val() method, so lets try using type="number" and <select> .

Note that if your browser doesn't support an input type, it will just assume "text" . If you'd like to know more, consider reading this article .

We'll append <option> elements to the <select> dynamically.

One of noUiSlider's core features is the ability to divide the range in a non-linear fashion. Stepping can be applied, too! The example on the right shows where the handles are on the slider range in values and percentages.

Lower Value: 

Lower Offset: 

Upper Value: 

Upper Offset: 

Using serialization , cross-updating values will results in an infinite loop of updates. To prevent this, each Link has the option to disable synchronisation.

Value: 

Value: 

Example

Clicking the button below sets the slider, which uses a range from 0 to 100 , to 20 .

Tap

A handle snaps to a clicked location. A smooth transition is used. This option is default.

Drag

Makes the range dragable. Requires two handles.

Fixed dragging

Keeps the distance between handles fixed when the 'drag' flag is set.

Snap

A handle snaps to a clicked location. It can immediatly be moved, without a mouseup + mousedown .

Combined options

Most 'behaviour' flags can be combined.

When using a stepped slider, your configuration may require that certain steps aren't available. Using the snap feature, this effect can be created.

Notice how 40 and 80 can't be selected on the slider.

Value: 

Value: 

Using the libLink feature, noUiSlider can provided handles with tooltips. These tooltips can be styled and modified on the fly, as demonstrated in this example.

A basic tooltip implementation is part of the libLink implementation.

The noUiSlider theme includes no tooltip styling. The following styles are used in this example:

libLink support

noUiSlider has full support for libLink, which will let you write values to input elements very easily. libLink will update the slider if you change an input as well!

As you can see, noUiSlider updates the value in the $('#readout') element, and typing in the input will change the slider.

Value: 

Feature overview

Play with the example a bit, and look at the samples to see how easy it was to set up all those form-fields. Note how all input is automatically validated, to prevent invalid values anywhere.

<form id="moneyForm">

<div id="noui-slider-mf-rangeSlider"></div>

<div id="noui-slider-mf-value"></div>

<div class="form-group">
  <input type="text" class="form-control" id="noui-slider-mf-one" name="one">
</div>
<div class="form-group">
  <input type="text" class="form-control" id="noui-slider-mf-two" name="two">
</div>

<div id="noui-slider-mf-someElement"></div>

</form>

As all dates in JavaScript can be represented as time, noUiSlider can handle them, too. This example will show you how to convert dates to numerical ranges, and then use the serialization feature to display them in a pretty format.

We'll be creating timestamps from strings. In order to do this easily, we'll define a new helper function. This function accepts a string, creates a new Date and then returns it as a timestamp.

In in overview below you'll find the code used to run this example. For readability, all helper functions have been moved into their own tab.

Value: 

Value: 

This optional extention to noUiSlider allows you to generate points along the slider.

Five options can be set: mode to determine where to place pips, values as additional options for mode , stepped to round pip values to the slider stepping, density to pre-scale the number of pips, and filter to manually modify pip size.

All sliders on the page use the same range, as displayed to the right.

Steps

Positions

Count

Values

Disabling a slider is identical to disabling a checkbox or textarea; simply set the disabled attribute.

A disabled slider can't be changed by sliding, click or touching, but you can still change its value using the .val() method. You can use CSS to show the disabled state. The default theme also sets a not-allowed cursor.

The slider below is disabled when the checkbox gets checked, and re-enabled when it is unchecked.