如何在Bootstrap-Slider中設置工具提示爲文本字符串與刻度值

我想知道是否可以重寫Bootstrap-Slider中的tick values（文章發佈時的最新版本爲v9.7.2）爲文本字符串vs 。刻度值。如何在Bootstrap-Slider中設置工具提示爲文本字符串與刻度值

在下面的屏幕快照中，滑塊上最後一個選擇元素上方出現刻度值「2」。我希望能夠讓「發言」這個詞代替。那可能嗎？

這裏是我的HTML：

<div class="form-group"> 
    <label class="col-md-4 control-label" for="language_french">French</label> 
    <div class="col-md-4"> 
    <input id="language_french" type="text" data-provide="slider" 
     data-slider-ticks="[0, 1, 2]" 
     data-slider-min="0" 
     data-slider-max="2" 
     data-slider-step="1" 
     data-slider-value="0" 
     data-slider-tooltip="show" 
    /> 
    </div> 
</div>

這裏是我的jQuery/JavaScript的：

每答案

<script> 
    // https://github.com/seiyria/bootstrap-slider 
    var slider_002 = new Slider('#language_french'); 
</script>

修訂從@Seiyria ...但它僅適用於該法語語言實例。沒有其他語言實例作品：

<script> 
    // https://github.com/seiyria/bootstrap-slider 
    var values = ['None', 'Read', 'Speak']; 
    var formatter = (index) => values[index]; 
    new Slider('#language_english'); 
    new Slider('#language_french', { formatter }); 
    new Slider('#language_italian', { formatter }); 
    new Slider('#language_spanish', { formatter }); 
</script>

來源

2017-02-19 H. Ferrence

要做到這一點，你必須使用formatter功能。可以找到一個例子here（查看例子＃23）。

在你的情況下，它會是這樣的：

var values = ['None', 'Read', 'Speak'] 
var formatter = (index) => values[index] 

new Slider('#language_french', { formatter })

來源

2017-02-19 16:31:12 Seiyria

優秀和完美的......正是我所期待的@Seiyria。你的引導滑塊插件是太棒了。謝謝！雖然似乎只能在第一個Slider（）實例上工作，而不是其他部分...... –

請參閱上面的@Seiyria修改後的答案 - 謝謝。 –

@ H.Ferrence它在這個問題上大部分都不在這個問題的範圍之內，所以你需要創建一個jsfiddle來證明這一點，因爲沒有什麼奇怪的東西讓它不能用於多個實例。 – Seiyria

如何在Bootstrap-Slider中設置工具提示爲文本字符串與刻度值

回答

相關問題