javascript - 如何在 slider 中使用字符串而不是数字？

Question

我正在使用 bootstrap slider我正在做:

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>

使用 $("#days").slider({}); 启动它

这行得通，但是如果我想使用字符串而不是数字创建几个月的 slider 怎么办？

Months: <b>January</b> <input id="months" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[January, February, March]"/> <b>March</b>

使用 $("#months").slider({}); 启动它

这给出了:

Error: Invalid input value '[January, February, March]' passed in

jsFiddle here

Answer 1

给您一个解决方案 https://jsfiddle.net/pz3ce0o6/1286/

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

.col-xs-4 {
  margin-bottom: 40px;
}

.slider.slider-horizontal .slider-tick-label-container {
  margin-top: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>
    <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: <input id="months" type="text" class="span2" value="" 
          data-slider-min="1" 
          data-slider-max="12"
          data-slider-step="1" 
          data-slider-ticks="[1, 2, 3]"
          data-slider-ticks-labels='["January", "February", "March"]' />
      </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>

引用: http://seiyria.com/bootstrap-slider/ .检查示例 19。

希望对您有所帮助。