twitter-bootstrap - 带有显示值的 Bootstrap 范围 slider

Question

我检查了 Bootstrap 4 文档中的范围 slider 和答案，但无法找到 slider 在移动轨道时显示值的方法。

我看到像 seiyria/bootstrap-sliderand 这样的开源项目可以让你做到这一点，但是真的没有内置方法( Bootstrap 参数)来在轨道移动时显示值吗？

Answer 1

答案是否定的，没有默认的方式。

我的解决方法如下。在查看了一堆解决方案并注意到它们在浏览器设备之间的不一致程度后，我们决定最好在 div 容器中实时输出选择。

slider HTML:

<div class="form-group mt-4 text-center">
<label for="price"><h4>Minimum price</h4></label>

<div class="price">500000</div>
<input type="range" class="custom-range" min="20000" max="1000000" step="10000" id="customRange3" name="Price" value="500000" style="width: 100%">

这将实时输出当前选定的 div 内包含的范围(需要 jquery)

<script>
$( document ).ready(function() {
    $('#customRange3').on('input', function(){
         v = $('#customRange3').val();
         console.log(v);
         $('div.price').text(v);
    });
});
</script>

现在，当您上下滑动跟踪器时，它将更新“结果”下方的数字