2017-02-19 17 views
0

ブートストラップスライダー(投稿時点での最新v9.7.2)のtick valuesをテキスト文字列に置き換えることが可能かどうかは疑問です。 。ティック値。Bootstrap-Sliderのツールチップをテキスト文字列とダニの値に設定するには

以下のスクリーンショットでは、スライダの最後の選択要素の上にティック値 "2"が表示されます。私は代わりに「話す」という言葉を出すことができるようにしたい。それは可能ですか?ここで

enter image description here

私のHTMLです:

@Seiyriaからの回答ごとに改正
<script> 
    // https://github.com/seiyria/bootstrap-slider 
    var slider_002 = new Slider('#language_french'); 
</script> 

...それだけのために働く:ここ

<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 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> 

答えて

2

これを達成するには、formatter関数を使用する必要があります。例はhereです(例#23を見てください)。あなたのケースでは

、それはこのようなものになるでしょう:

優れた、完璧な
var values = ['None', 'Read', 'Speak'] 
var formatter = (index) => values[index] 

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

...私は@Seiyriaを期待していたまさに。あなたのbootstrap-sliderプラグインは素晴らしいです。ありがとう!しかし、最初のSlider()インスタンスでのみ動作し、残りの部分は動作していないようですが... –

+0

@Seiyria上の私の修正された答えを見てください - ありがとう。 –

+0

@H.Ferrenceその点ではこの問題の範囲外ですが、これを実証するためにはjsfiddleを作成する必要があります。なぜなら、これが複数のインスタンスではうまく動作しないという理由がないからです。 – Seiyria

関連する問題