Adding a scale/pips to a slider

The pips 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.

API exposure

Pips can be created when setting up a slider, or by calling pips() in the API. This can be used to update or remove pips after slider creation.

// returns the created HtmlElement
var pips = slider.noUiSlider.pips(/* options */);

Range

The range mode uses the slider range to determine where the pips should be. A pip is generated for every range-segment 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');

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

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

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

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

noUiSlider.create(pipsRangeVerticalRtl, {
    range: range,
    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, large values are used for every step divisible by a thousand (1000, 2000, 3000), and small values for every step divisible by 500 (2500, 3500, 4500).

Pips supports a format option in the same way the slider itself does. Refer to the documentation on number formatting for more information.

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: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    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:

The positions mode places pips at exactly the provided positions (in percentages) on the slider. For the example, 25% is 1813 on the slider.

If stepped: true is set, the provided percentages are rounded to the nearest user-selectable step on the slider. As 25% is in the '10%': [500, 500] segment of the range, the step value that applies is 500, so the 1813 pip is rounded to the nearest step at 2000.

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

noUiSlider.create(pipsPositions, {
    range: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    start: 0,
    pips: {
        mode: 'positions',
        values: [0, 25, 50, 75, 100],
        density: 4
    }
});

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

noUiSlider.create(positionsStepped, {
    range: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    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: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    start: 0,
    pips: {
        mode: 'count',
        values: 6,
        density: 4
    }
});

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

noUiSlider.create(pipsCountStepped, {
    range: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    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: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    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: {
        'min': [     0 ],
        '10%': [   500,  500 ],
        '50%': [  4000, 1000 ],
        'max': [ 10000 ]
    },
    start: 0,
    pips: {
        mode: 'values',
        values: [50, 552, 4651, 4952, 5000, 7080, 9000],
        density: 4,
        stepped: true
    }
});