javascript - Bootstrap Slider 中的格式化工具提示

Question

我正在使用 Bootstrap Slider control .我正在这样设置我的 slider :

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

这个 slider “有效”，除了一件:工具提示。当用户滑动时，我需要将工具提示格式化为单精度。换句话说，我需要工具提示来显示 10.0 -> 10.1 -> 10.2 等。目前，当用户滑动时，我可能会看到类似“55.300000000004”的值。我真的很想在工具提示中包含一个百分比，以便它显示类似“10.0%”或“10.1%”的内容。尽管如此，我仍需要工具提示中的单个精度值，但我运气不好。

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

谢谢!

Answer 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();  
});