Question

我正在使用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 - ＆gt; 10.1 - ＆gt; 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();  
});

Answer 2

你需要在bootstrap-slider.js中编辑的代码块是

if (this.range) {
            this.tooltipInner.text(
                this.formater(this.value[0]) +
                ' : ' +
                this.formater(this.value[1])
            );
            this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
        } else {
            this.tooltipInner.text(
                this.formater(this.value[0])
            );
            this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
        }
    },

现在，当您想要在百分比值旁边看到％符号时，只需添加

if (this.range) {
                this.tooltipInner.text(
                    this.formater(this.value[0] + ' %') +
                    ' : ' +
                    this.formater(this.value[1] + ' %')
                );

在Bootstrap滑块中格式化工具提示

2 个答案: