如何爲引導滑塊提供跟蹤點？

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