问题描述
我正在使用 Bootstrap 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',{});
解决方法
您可以使用 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>