javascript - 如何为 Bootstrap 滑块提供跟踪点？

Question

我有一个场景，比如我有一个 Bootstrap 滑块，因为我想要滑块轨道上的跟踪点，并且工具提示必须固定（即即使在单击后它也必须存在）。

这是我的 Plunker 链接：

http://embed.plnkr.co/D3GJQn/preview

我需要在轨道上获得点，如下图所示：

Answer 1

看一下示例 13。这是示例代码，请注意ticks属性：

var slider = new Slider("#ex13", {
    ticks: [0, 100, 200, 300, 400],
    ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
    ticks_snap_bounds: 30
});

Answer 2

这就是我获得当前值的方式：

 $(document).ready(function () {
            var mySlider = $("#slider-input").slider({
                min:0,
                max: 4200,
                value:1000,
                step:1000,
                formatter:  function(value) {
                       return 'Current value: ' + value;
               }
            });
        });

您还可以通过执行以下操作来显示值：

    $("#mySlider").on("slide", function(slideEvt) {
           $("#sliderValue").text(slideEvt.value);
     });

使用 HTML：

<span>Current Value: <span id="sliderValue">1</span></span>

这是一个链接，显示我在执行此操作后发现的一些示例：http: //seiyria.com/bootstrap-slider/

希望这可以帮助！

Answer 3

添加属性tooltip:"always"以始终显示工具提示

        $(document).ready(function () {
            var mySlider = $("#slider-input").slider({
                min:0,
                max: 4200,
                value:1000,
                step:1000,
                tooltip:"always"
            });
        });

您可以在此处查看完整的选项集 - https://github.com/seiyria/bootstrap-slider#options

要获取幻灯片的当前值，请参见下文。

     $("#slider-input").on('slide', function (ev) {
        console.log($("#slider-input").val());
      });

您可以使用ticks: [0, 500, 1000, 1500], 属性来显示中间点。更多http://seiyria.com/bootstrap-slider/

示例 - https://plnkr.co/edit/W8c2UuPMiEeMwQ8g7kCV?p=preview