如何在滑块中使用字符串而不是数字？

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> 

与

这一工程，但如果我想为月滑块，使用字符串而不是数字是什么启动了吗？

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.

希望这会帮助你。