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({});

启动它

这样可行，但如果我想创建一个滑块数月，使用字符串而不是数字呢？

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({});

启动它

这给出了：

错误：输入值无效＆＃39; [1月，2月，3月]＆＃39;传入

jsFiddle here

Answer 1

您可以使用解决方案https://jsfiddle.net/pz3ce0o6/1286/

＆＃13;

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

＆＃13;

.col-xs-4 {
  margin-bottom: 40px;
}

.slider.slider-horizontal .slider-tick-label-container {
  margin-top: 40px;
}

＆＃13;

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

＆＃13;

参考： http://seiyria.com/bootstrap-slider/。检查例子19。

希望这会对你有所帮助。

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

1 个答案: