javascript - 如何在工具提示 slider 中显示字符串？

Question

我想在工具提示上显示月份名称而不是数字，我正在这样做:

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

slider 工作正常，但工具提示显示的不是月份名称而是数字。

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

这是 fiddle : https://jsfiddle.net/1qcqLadd/