1

我正在使用引导滑块，我正在做：

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

这给出了：

错误：传入的输入值“[January, February, March]”无效

jsFiddle在这里

4

1 回答 1

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。

希望这会帮助你。

于 2017-08-05T15:58:15.210 回答