Adding a scale/pips to a slider

This feature allows the generation of 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.

The density value controls how many pips are placed on one percent of the slider range. With the default value of 1, there is one pip per percent. For a value of 2, a pip is placed for every 2 percent. A value below one will place more than one pip per percentage.

All sliders on the page use the same range.

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');
var pipsRangeRtl = document.getElementById('pips-range-rtl');
var pipsRangeVertical = document.getElementById('pips-range-vertical');
var 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:

-1 (no pip at all)
0 (no value)
1 (large value)
2 (small value)

Arguments to the filter function are the value (number) and the type (0, 1 or 2 like above).

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.

Pips are written as HTML. When using user-supplied values in the format option, they might need to be escaped.

function filterPips(value, type) {
    if (type === 0) {
        return value < 2000 ? -1 : 0;
    }
    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: filterPips,
        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
    }
});