Number formatting

To format the slider output, noUiSlider offers a format option.

Specify to and from functions to encode and decode the values.

By default, noUiSlider will format output with 2 decimals.

The to/from paradigm is supported in the the wNumb formatting library. wNumb offers a wide range of options and provides number validation. wNumb is completely optional, and not included in noUiSlider by default.

Note that if the .to() method returns a Number, noUiSlider's .get() will also return Numbers. See this issue for more details.

noUiSlider.create(slider, {
    /* ... */
    format: {
        // 'to' the formatted value. Receives a number.
        to: function (value) {
            return value + ',-';
        },
        // 'from' the formatted value.
        // Receives a string, should return a number.
        from: function (value) {
            return Number(value.replace(',-', ''));
        }
    }
});

Formatting with wNumb

var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
    start: [20000],
    step: 1000,
    range: {
        'min': [20000],
        'max': [80000]
    },
    format: wNumb({
        decimals: 3,
        thousand: '.',
        suffix: ' (US $)'
    })
});

Connecting the input field

var inputFormat = document.getElementById('input-format');

sliderFormat.noUiSlider.on('update', function (values, handle) {
    inputFormat.value = values[handle];
});

inputFormat.addEventListener('change', function () {
    sliderFormat.noUiSlider.set(this.value);
});

Tooltips

The tooltips option can accept the same to/from formatter.

By default, the tooltips use the same formatting as the slider output, but this can be overridden.

var tooltipSlider = document.getElementById('slider-tooltips');

noUiSlider.create(tooltipSlider, {
    start: [20, 80, 120, 140],
    tooltips: [
        // no tooltip
        false,
        // tooltip with custom formatting
        wNumb({decimals: 1}),
        // tooltip with default formatting
        true,
        // tooltip with manual formatting
        { to: function(value) { return '❤️ ' + value; } }
    ],
    /**
     * Tooltip with default formatting on all handles:
     * tooltips: true,
     *
     * Tooltip with specific formatting on all handles:
     * tooltips: {
     *     to: ...
     * }
     *
     * Tooltip with specific formatting on each handle:
     * tooltips: [
     *     { to: ... },
     *     { to: ... },
     *     { to: ... },
     * ]
     */
    range: {
        'min': 0,
        'max': 200
    }
});

Pips

The pips option can accept the same to/from formatter.

By default, the pips use the same formatting as the slider output, but this can be overridden.

var pipsSlider = document.getElementById('slider-pips');

noUiSlider.create(pipsSlider, {
    start: [0, 90],
    step: 30,
    range: {
        'min': 0,
        'max': 210
    },
    pips: {
        mode: 'steps',
        density: 3,
        format: wNumb({
            decimals: 2,
            prefix: '€'
        })
    }
});

Aria

Formatting can be used for the aria-valuenow accessibility attribute using the ariaFormat option.

noUiSlider.create(slider, {
    /* ... */
    ariaFormat: wNumb({
        decimals: 3
    }),
});