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 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],
    tooltips: [false, wNumb({decimals: 1}), true],
    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
    }),
});