Question

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

这是我的Plunker链接：

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

我需要在赛道上获得积分，如下图所示：

Answer 1

添加属性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

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

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

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

如何为Bootstrap滑块创建跟踪点？

3 个答案: