在 Nouislider 中将点值显示为数字范围

Question

我用这段代码创建了一个nouislider：

<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>

我的点值显示为，

但我希望它以这种方式显示：

请问我怎样才能做到这一点？我可以在点值中输入 HTML 值还是必须使用 jquery?

Answer 1

pips 选项 accepts a format parameter。您可以在那里传递一个 to 函数来按照问题中的描述格式化每个值。

在 Nouislider 中将点值显示为数字范围

Display pip values in Nouislider as number range

jquery

nouislider