jquerynouislider

Display pip values in Nouislider as number range

I have created a nouislider with this code:

<div id="slider"></div>
<script>
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
    start: 0,
    step: 1,
    tooltips: false,
    connect: 'lower',
    range: {
        min:[559],
            '1%':[559,1],
            '25%':[560,60],
            '50%':[620,55],
            '75%':[675,75],
            '100%':[725],max:[725]
    },
    pips: {
        mode: 'values',
        values: [559,560,620,675,725],
        density: 20 }
       
   
});
</script>

and my pip values appear as,

enter image description here

but I want it to appear this way: enter image description here

Please how can I achieve this? Can I input an HTML value in the pip value or do I have to use jquery?

Solution

  • The pips option accepts a format parameter. You can pass a to function there to format each value as described in the question.