0

我得到 2 个相同的滑块重叠。我只想要 1 个滑块。

不知道如何实现这个插件。有人成功使用过吗？

网络文档片段：

<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

  <!-- seiyria-bootstrap-slider Plugin -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>

</head>
<body>
...

<style> /* 2017-02-21 override to fix styling issues with plugin */
  div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal { margin-bottom: 20px !important; }
  div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container { margin-left: -52.5px !important; }
  div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container div.slider-tick-label { width: 105px !important; }
</style>

<script> // https://github.com/seiyria/bootstrap-slider
  var values = ['None', 'Read', 'Speak'];
  var formatter = (index) => values[index];
</script>

<!-- Slider (default "English") -->
<div class="form-group" id="fixBootstrapSliderPluginStyles">
  <label class="col-md-4 control-label" for="language_english">English</label>
  <div class="col-md-4">
    <input id="language_english" type="text" data-provide="slider"
      data-slider-ticks="[0, 1, 2]"
      data-slider-ticks-labels='["None", "Read", "Speak"]'
      data-slider-min="0"
      data-slider-max="2"
      data-slider-step="1"
      data-slider-value="2"
      data-slider-tooltip="show"
    />
  </div>
</div>

<script>
  new Slider( '#language_english', {formatter} );
</script>

...
</body>
</html>

下面是它在 Chrome（最新）和 IE（最新）中的样子： 在此处输入图像描述

我的 jsFiddle： https ://jsfiddle.net/kretrjgz/

4

2 回答 2

0

data-provider="slider"从标记中删除：https ://jsfiddle.net/kretrjgz/2

data-provide使用您的选项自动实例化一个滑块。您不能以这种方式提供函数，因此唯一的方法是在 JS 中提供它。通常，您要么将所有选项放在一个地方，要么将其放在另一个地方，而不是两者兼而有之，这就是使这种情况特别令人困惑的原因。

您可以看到这data-provide是有据可查的（参见示例 #19）。

于 2017-02-23T16:55:05.097 回答
0

您正在创建滑块的两个实例。

如果您删除底部脚本标签，它应该可以正常工作

<script>
  //new Slider( '#language_english', {formatter} );
</script>

您在 HTML 中创建了一个，在脚本标签上创建了一个（不破坏先前的）。

如果您在底部放置一个带有 5 倍新滑块的脚本标签

 new Slider( '#language_english', {formatter} );
 new Slider( '#language_english', {formatter} );
 new Slider( '#language_english', {formatter} );
 new Slider( '#language_english', {formatter} );
 new Slider( '#language_english', {formatter} );

它将创建 5 个滑块。正如预期的那样。

通过示例和烟花等，文档非常容易理解：

https://github.com/seiyria/bootstrap-slider

于 2017-02-23T15:55:25.420 回答