javascript – 在Bootstrap Slider中格式化工具提示

我正在使用Bootstrap Slider control.我正在设置我的滑块,如下所示:

<input id="percentSlider" data-slider-id="percentSlider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" value="0" />
<input id="percent" class="form-control" type="text" autocomplete="off"  />

...

var p = 0;
var percentSlider = $('#percentSlider')
  .slider({
    formatter: function (value) {
      return value.toFixed(1) + '%';
    },
    value: p,
    precision: 1
  })
  .on('slide', function (s) {
    $('#percent').val(s.value.toFixed(1));
  })
;

$('#percent').val(p);

这个滑块“有效”,除了一个:工具提示.当用户滑动时,我需要使用单一精度格式化工具提示.换句话说,我需要工具提示来显示10.0 – > 10.1 – > 10.2等.目前,当用户滑动时,我可能会看到类似’55 .300000000004’的值.我真的想在工具提示中包含一个百分比,所以它显示的内容类似于’10 .0%’或’10 .1%’.不过,我需要在工具提示中使用单个精度值,我没有运气.

有谁知道如何指定工具提示的格式?

谢谢!

最佳答案
无需更改实际插件文件的解决方案:

var percentSlider = $('#percentSlider').slider();
var sliderTooltip = $('#percentSlider .tooltip .tooltip-inner');
//function to change the tooltip value to required format
var _changeTooltipFormat = function(){
	sliderTooltip.text(sliderTooltip.text()+'%');
}
//change tooltip format on initial load
_changeTooltipFormat();

//on slide event 
percentSlider.on('slide', function () {
   $('#percent').attr('value',percentSlider.data('slider').getValue());
   //change tooltip value format 
   _changeTooltipFormat();  
});

转载注明原文:javascript – 在Bootstrap Slider中格式化工具提示 - 代码日志