Slider values

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.

 

 

$('#slider-handles').noUiSlider({
	start: [ 4000, 8000 ],
	range: {
		'min': [  2000 ],
		'max': [ 10000 ]
	}
});

§

Range

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

 

7914.63

$('#slider-range').noUiSlider({
	start: [ 4000 ],
	range: {
		'min': [  2000 ],
		'max': [ 10000 ]
	}
});

Display the slider value

$('#slider-range').Link('lower').to($('#slider-range-value'));

§

Stepping and snapping to values

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

 

4000.00

$('#slider-step').noUiSlider({
	start: [ 4000 ],
	step: 1000,
	range: {
		'min': [  2000 ],
		'max': [ 10000 ]
	}
});

Display the slider value

$('#slider-step').Link('lower').to($('#slider-step-value'));

§

Non-linear sliders

Advanced Feature

noUiSlider offers some powerful mechanisms that allow a slider to behave in a non-linear fashion. You can create sliders with ever-increasing increments by specifying the value for the 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.

 

4000.00

$('#slider-non-linear').noUiSlider({
	start: [ 4000 ],
	range: {
		'min': [  2000 ],
		'30%': [  4000 ],
		'70%': [  8000 ],
		'max': [ 10000 ]
	}
});

Display the slider value

$('#slider-non-linear').Link('lower').to($("#slider-non-linear-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.

 

500.00

$('#slider-non-linear-step').noUiSlider({
	start: [ 500, 4000 ],
	range: {
		'min': [     0 ],
		'10%': [   500,  500 ],
		'50%': [  4000, 1000 ],
		'max': [ 10000 ]
	}
});

Display the slider value

$('#slider-non-linear-step').Link('lower').to($('#slider-non-linear-step-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.

 

0.00 500.00

$('#slider-snap').noUiSlider({
	start: [ 0, 500 ],
	snap: true,
	connect: true,
	range: {
		'min': 0,
		'10%': 50,
		'20%': 100,
		'30%': 150,
		'40%': 500,
		'50%': 800,
		'max': 1000
	}
});

Display the slider value

$('#slider-snap'

http://refreshless.com/nouislider/slider-values/