如何为引导滑块提供跟踪点？

Question

我有一个场景，就像我有一个引导滑块，因为我想要在滑块的轨道上跟踪点，并且工具提示必须是固定的（即它必须在点击后存在）。

这里是我的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]，属性显示intermedaite点。更多http://seiyria.com/bootstrap-slider/

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

Answer 2

这是怎么弄到的当前值：

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

与HTML：

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

您也可以通过执行显示值

<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 
});