Wie zeige ich einen String in einem Tooltip Slider an?

Question

Ich mag würde die Monatsnamen auf der tooldtip nicht um die Zahlen zu zeigen, ich tue:

<div class="container"> 

<div class="row" id="time" > 
    <div class="col-xs-4"> 
    Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b> 
    </div> 
    <div class="col-xs-4"> 
    Months: <b>January</b> <input id="months" type="text" 
      data-provide="slider" 
      data-slider-ticks-labels='["January", "February", "March, "April", "May", "June", "July", "August", "September", "October", "November", "December"]' 
      data-slider-min="1" 
      data-slider-max="12" 
      data-slider-step="1" 
      data-slider-value="" 
      data-slider-tooltip="show" /> <b>December</b> 
    </div> 
    <div class="col-xs-4"> 
    Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b> 
    </div> 
</div> 
</div> 

Und ich nenne es:

$("#days, #years, #months").slider({ 
    tooltip: 'always' 
}); 

Der Slider funktioniert gut, aber der Tooltip nicht zeigt die Monatsnamen, aber die Zahlen.

jsFiddle here

Answer 1

Dazu werden Sie die Formatierungsfunktion verwenden. Sie können das Beispiel hier sehen (Beispiel 23).

In Ihrem Fall:

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 

$("#days, #years").slider({ 
    tooltip: 'always' 
}); 

$("#months").slider({ 
    tooltip: 'always', 
    value: [0, 12], 
    tooltip: 'always', 
    formatter: function(values) { 
     return months[values[0]-1] + ' : ' + months[values[1]-1]; 
    }, 
}); 

Hier ist die Geige: https://jsfiddle.net/1qcqLadd/