noUiSlider

Search…
noUiSlider
Lightweight JavaScript range slider.
Please note, this field depend on the following library:
​noUiSlider (github)
Special properties of field
Property
Type
Description
max
Number
Largest value that the slider can select.
min
Number
Smallest value that the slider can select.
noUiSliderOptions
Object
Settings of slider component. See details below.
values
Array or Function
List of items. It can be an array with items, or a function, what is resulted an array. The item will be a String or an object with an id and a name properties.
noUiSliderOptions
For more details, see the official noUiSlider documentation.
Property
Default
Accepted values
Description
connect
"lower"
"lower", "upper", Boolean
The connect setting can be used to control the (green) bar between the handles, or the edges of the slider. Use "lower" to connect to the lower side, or "upper" to connect to the upper side. Setting true sets the bar between the handles.
margin
none
Number
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on standard linear sliders.
limit
none
Number
The limit option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders.
step
none
Number
By default, the slider slides fluently. In order to make the handles jump between intervals, you can use this option. The step option is relative to the values provided to range.
orientation
"horizontal"
"vertical", "horizontal"
The orientation setting can be used to set the slider to "vertical" or "horizontal". Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. You can use any unit you want, including % or px.
direction
"ltr"
"ltr", "rtl"
By default the sliders are top-to-bottom and left-to-right, but you can change this using the direction option, which decides where the upper side of the slider is.
tooltips
false
Boolean, formatter, Array[formatter or false]
noUiSlider can provide a basic tooltip without using its events system. Set the tooltips option to true to enable. This option can also accept formatting options to format the tooltips content. In that case, pass an array with a formatter for each handle, true to use the default or false to display no tooltip.
animate
true
Boolean
Set the animate option to false to prevent the slider from animating to a new value with when calling .val(). More details​
range
none
Object
Overide the min and max properties for more complex range behavior (Non-linear sliders). More details​
pips
none
Object
This feature allows you to generate points along the slider. More details​
Usage
Simple slider:
1
{
2
  type: "noUiSlider",
3
  label: "Volume level",
4
  model: "volume",
5
  min: 0,
6
  max: 100,
7
  required: true,
8
  noUiSliderOptions: {
9
    connect: "lower",
10
  },
11
  validator: validators.required
12
}
Copied!
Stepped slider with custom scale:
1
{
2
  type: "noUiSlider",
3
  label: "Volume level",
4
  model: "volume",
5
  min: 0,
6
  max: 140,
7
  required: true,
8
  noUiSliderOptions: {
9
    connect: "lower",
10
    step: 10,
11
    pips: {
12
      mode: 'steps',
13
      density: 5,
14
      filter: function( value, type ) {return value % 4 ? 2 : 1;},
15
      format: {
16
        to: function ( value ) {
17
          return value + 'dB';
18
        },
19
        from: function ( value ) {
20
          return value.replace('dB', '');
21
        }
22
      }
23
    }
24
  },
25
  validator: validators.required
26
}
Copied!
Vertical reversed non-linear slider with scale:
1
{
2
  type: "noUiSlider",
3
  label: "Vertical reversed non-linear slider with scale",
4
  model: "power",
5
  min: 0,
6
  noUiSliderOptions: {
7
    connect: "lower",
8
    orientation: 'vertical',
9
    direction: 'rtl',
10
    range:{
11
      'min': [     0 ],
12
      '10%': [   500,  500 ],
13
      '50%': [  4000, 1000 ],
14
      'max': [ 10000 ]
15
    },
16
    pips: {
17
        mode: 'range',
18
        density: 3
19
    }
20
  }  
21
}
Copied!
masked
pikaday
Last modified 2yr ago
Copy link
Contents
Special properties of field
noUiSliderOptions
Usage