Javascript 引导滑块中的格式化工具提示

我在用电脑。我正在设置滑块，如下所示：

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

...
var p=0；
var percentSlider=$（“#percentSlider”）
.滑块({
格式化程序：函数（值）{
返回值.toFixed（1）+'%'；
},
值：p，
精度：1
})
.on（'幻灯片'，功能）{
$（'百分比'）.val（s.value.toFixed（1））；
})
;
$（'百分比'）.val（p）；

这个滑块“工作”，除了一个部分：工具提示。作为用户幻灯片，我需要将工具提示格式化为单精度。换句话说，我需要工具提示来显示10.0->10.1->10.2等。当前，当用户滑动时，我可能会看到类似“55.3000000000004”的值。我真的希望在工具提示中也包含一个百分比，这样它会显示“10.0%”或“10.1%”之类的内容。尽管如此，我仍然需要工具提示中的一个精度值，而我这样做并不幸运

有人知道如何指定工具提示的格式吗

---

谢谢

因为我在选项中没有看到/获取任何工具提示文本的设置器或格式区域。我想到了这个。希望这能有所帮助

在bootstrap-slider.js中搜索var formattedTooltipVal

在这里，您可以看到上述变量的初始化。我需要添加$，因为我需要显示价格范围。编辑如下

formattedTooltipVal = '$' + this.options.formatter(this._state.value).replace(": ", ": $");

---

您需要在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] + ' %')
                );

---

解决方案无需更改实际插件文件：

var percentSlider=$（'#percentSlider'）.slider（）；
var sliderTooltip=$（'#percentSlider.tooltip.tooltip-inner'）；
//函数将工具提示值更改为所需格式
var_changeTooltipFormat=函数（）{
sliderTooltip.text（sliderTooltip.text（）+'%'）；
}
//在初始加载时更改工具提示格式
_changeTooltipFormat（）；
//幻灯片事件
百分比滑块.on（'slide'，函数（）{
$（'#percent'）.attr（'value'，percentSlider.data（'slider'）.getValue（））；
//更改工具提示值格式
_changeTooltipFormat（）；
});