2

我想知道是否可以将tick valuesBootstrap-Slider 中的（发布时最新的 v9.7.2）覆盖为文本字符串与刻度值。

在下面的屏幕截图中，刻度值“2”出现在滑块上最后一个选择元素的上方。我希望能够改为出现“Speak”这个词。那可能吗？

在此处输入图像描述

这是我的 HTML：

<div class="form-group">
  <label class="col-md-4 control-label" for="language_french">French</label>
  <div class="col-md-4">
    <input id="language_french" type="text" data-provide="slider"
      data-slider-ticks="[0, 1, 2]"
      data-slider-min="0"
      data-slider-max="2"
      data-slider-step="1"
      data-slider-value="0"
      data-slider-tooltip="show"
    />
  </div>
</div>

这是我的 jQuery/JavaScript：

<script>
  // https://github.com/seiyria/bootstrap-slider
  var slider_002 = new Slider( '#language_french' );
</script>

根据@Seiyria 的回答进行了修改......但它仅适用于法语实例。没有其他语言实例有效：

<script>
  // https://github.com/seiyria/bootstrap-slider
  var values = ['None', 'Read', 'Speak'];
  var formatter = (index) => values[index];
  new Slider( '#language_english' );
  new Slider( '#language_french', { formatter } );
  new Slider( '#language_italian', { formatter } );
  new Slider( '#language_spanish', { formatter } );
</script>
4

1 回答 1

5

为此，您必须使用该formatter功能。可以在此处找到示例（查看示例 #23）。

在你的情况下，它会是这样的：

var values = ['None', 'Read', 'Speak']
var formatter = (index) => values[index]

new Slider('#language_french', { formatter })
于 2017-02-19T16:31:12.593 回答