noUiSlider Range and Handles Reading & Setting Values Formatting Options Tapping, Dragging & Fixed Ranges Examples Events Scale/Pips Updating, Disabling & Styling Download

# 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
        }
    });