如何在工具提示滑塊中顯示字符串？

Question

我想顯示在tooldtip幾個月名不是數字，我做：

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

，我把它叫做：

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

滑塊工作正常，但工具提示不顯示月份名稱，但數字。

jsFiddle here

Answer 1

爲此，你將不得不使用格式化功能。你可以在這裏看到例子（例23）。

你的情況：

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

這裏是小提琴： https://jsfiddle.net/1qcqLadd/