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

# 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 `Number`s. 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
        }),
    });