noUiSlider Slider range and handles Reading & Setting values Options Tapping, dragging & fixed ranges Examples Events Scale/Pips More... Download noUiSlider

Adding a scale/pips to a slider

This feature 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.

var range_all_sliders = {
	'min': [     0 ],
	'10%': [   500,  500 ],
	'50%': [  4000, 1000 ],
	'max': [ 10000 ]
};

API exposure

The pips feature is also exposed in the public API. This could be useful to update or remove pips after slider creation.

slider.noUiSlider.pips(/* options */);

// Find the current set of pips.
slider.querySelector('.noUi-pips');
§

Range

The range mode uses the slider range to determine where the pips should be. A pip is generated for every percentage specified.

Left-to-Right (default):

Right-to-Left:

Vertical and vertical, bottom-to-top:

var pipsRange = document.getElementById('pips-range'),
	pipsRangeRtl = document.getElementById('pips-range-rtl'),
	pipsRangeVertical = document.getElementById('pips-range-vertical'),
	pipsRangeVerticalRtl = document.getElementById('pips-range-vertical-rtl');

noUiSlider.create(pipsRange, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'range',
		density: 3
	}
})

noUiSlider.create(pipsRangeRtl, {
	range: range_all_sliders,
	start: 0,
	direction: 'rtl',
	pips: {
		mode: 'range',
		density: 3
	}
});

noUiSlider.create(pipsRangeVertical, {
	range: range_all_sliders,
	start: 0,
	orientation: 'vertical',
	pips: {
		mode: 'range',
		density: 3
	}
});

noUiSlider.create(pipsRangeVerticalRtl, {
	range: range_all_sliders,
	start: 0,
	orientation: 'vertical',
	direction: 'rtl',
	pips: {
		mode: 'range',
		density: 3
	}
});
§

Steps

Like range, the steps mode uses the slider range. In steps mode, a pip is generated for every step. The filter option can be used to filter the generated pips.

The filter function must return 0 (no value), 1 (large value) or 2 (small value).

Here, we'll use large values for every step matching a thousand (1000, 2000, 3000), and small values for every step matching 500 (2500, 3500, 4500).

The Pips add-on supports format in the same way the slider itself does.

function filter500( value, type ){
	return value % 1000 ? 2 : 1;
}

var pipsSteps = document.getElementById('pips-steps');

noUiSlider.create(pipsSteps, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'steps',
		density: 3,
		filter: filter500,
		format: wNumb({
			decimals: 2,
			prefix: '$'
		})
	}
});

Slider with filtered steps:

§

Positions

In positions mode, pips are generated at percentage-based positions on the slider. Optionally, the stepped option can be set to true to match the pips to the slider steps.

Stepped positions:

var pipsPositions = document.getElementById('pips-positions');

noUiSlider.create(pipsPositions, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'positions',
		values: [0,25,50,75,100],
		density: 4
	}
});
var positionsStepped = document.getElementById('pips-positions-stepped');

noUiSlider.create(positionsStepped, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'positions',
		values: [0,25,50,75,100],
		density: 4,
		stepped: true
	}
});
§

Count

The count mode can be used to generate a fixed number of pips. As with positions mode, the stepped option can be used.

Stepped count:

var pipsCount = document.getElementById('pips-count');

noUiSlider.create(pipsCount, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'count',
		values: 6,
		density: 4
	}
});
var pipsCountStepped = document.getElementById('pips-count-stepped');

noUiSlider.create(pipsCountStepped, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'count',
		values: 6,
		density: 4,
		stepped: true
	}
});
§

Values

The values mode is similar to positions, but it accepts values instead of percentages. The stepped option can be used for this mode.

Stepped values:

Note how overlapping pips are merged with the stepped option set.

var pipsValues = document.getElementById('pips-values');

noUiSlider.create(pipsValues, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'values',
		values: [50, 552, 2251, 3200, 5000, 7080, 9000],
		density: 4
	}
});
var pipsValuesStepped = document.getElementById('pips-values-stepped');

noUiSlider.create(pipsValuesStepped, {
	range: range_all_sliders,
	start: 0,
	pips: {
		mode: 'values',
		values: [50, 552, 4651, 4952, 5000, 7080, 9000],
		density: 4,
		stepped: true
	}
});