Bootstrap slider 如何将工具提示值移动到外部值？

Question

我正在使用 Bootstrap slider 插件创建一个 Range Slider

在 示例 2 我想删除 tooltip 选项并将值移动到外部选项。

这是我的代码：

HTML

<b class="min">$ 10</b> 
<input id="example2" type="text" data-slider-min="0" data-slider-max="2000" data-slider-step="1" data-slider-value="14" data-slider-tooltip="hide" /> 
<b class="max">$ 1000</b>

JavaScript

var slider = new Slider('#example2', {});

Answer 1

您可以使用 slide 事件获取当前值并将该值嵌入到您想要的位置：

slider.on("slide", function(sliderValue) {
    //do stuff here
});

您可以在此处查看代码段示例：

$(function() {

  var slider = new Slider('#example2', {});

  slider.on("slide", function(sliderValue) {
    document.getElementById("value").textContent = sliderValue;
  });

})

#value {
  color:red;
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>

<b class="min">$ 10</b>
<input id="example2" type="text" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="14" data-slider-tooltip="hide" />
<b class="max">$ 1000</b>

<br><br> value :
<div id="value"></div>

Bootstrap slider 如何将工具提示值移动到外部值？

Bootstrap slider How can I move the tooltip value to external one?

html

javascript

jquery

bootstrap-slider

bootstrap-5