我希望滑块上的工具提示仅显示“130”之类的整数,而不显示“130.00”。
我只是不知道我可以从哪里开始。

这是我的代码:

$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');

noUiSlider.create(groesseslider, {
    start: [ 145 ],
    step: 1,
    range: {
        'min': 100,
        'max': 250
    }
});
    });
$( document ).ready(function() {
    var groesseslider = document.getElementById('slider-tooltip');
var tipHandles = groesseslider.getElementsByClassName('noUi-handle'),
    tooltips = [];

// Add divs to the slider handles.
for ( var i = 0; i < tipHandles.length; i++ ){
    tooltips[i] = document.createElement('div');
    tipHandles[i].appendChild(tooltips[i]);
}

// When the slider changes, write the value to the tooltips.
groesseslider.noUiSlider.on('update', function( values, handle ){
    tooltips[handle].innerHTML = values[handle];
});
    });

我的JS代码:
http://jsfiddle.net/miiauwz/66a5ahm0/

最佳答案

您可以尝试使用unencoded值,如noUISlider关于events and their binding的文档中所述

slider.noUiSlider.on("update", function(values, handle, unencoded ) {
    // values: Current slider values;
    // handle: Handle that caused the event;
    // unencoded: Slider values without formatting;
});

否则可能会使用format option on slider creation(但我自己尚未尝试过):
noUiSlider.create(slider, {
    start: [ 20000 ],
    ...
    format: wNumb({
        decimals: 0, // default is 2
        thousand: '.', // thousand delimiter
        postfix: ' (US $)', // gets appended after the number
    })
});

缺点是您必须从以下位置单独下载wNumb-Library:http://refreshless.com/wnumb/

没有wNumb的另一种方法

在再次查看了noUISlider中的示例之后,我发现了this way用于手动格式化(在页面底部):
var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
    start: [ 20 ],
    ...

    format: {
      to: function ( value ) {
        return value + ',-';
      },
      from: function ( value ) {
        return value.replace(',-', '');
      }
    }
});

10-05 21:05
查看更多