Javascript 如何实现seiyria引导滑块_Javascript_Bootstrap Slider

Javascript 如何实现seiyria引导滑块

javascript

Javascript 如何实现seiyria引导滑块,javascript,bootstrap-slider,Javascript,Bootstrap Slider,我得到两个相同的滑块重叠。我只想要一个滑杆不知道如何实现这个插件。有人成功地使用过它吗 Web文档片段： <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  <scrip

我得到两个相同的滑块重叠。我只想要一个滑杆

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

Web文档片段：

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


...
/*2017-02-21覆盖以修复插件的样式问题*/
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal{页边距底部：20px！重要；}
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container{左边距：-52.5px！重要；}
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container div.slider-tick-label{宽度：105px！重要；}
// https://github.com/seiyria/bootstrap-slider
var值=['None'，'Read'，'Speak']；
变量格式化程序=（索引）=>值[索引]；
英语
新滑块（“#language_english”{formatter}）；
...

以下是Chrome（最新版本）和IE（最新版本）的外观：

我的JSFIDLE:

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

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

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

它将创建5个滑块。正如所料

该文档非常容易理解，包括示例和焰火等：

从标记中删除

数据提供程序=“滑块”

：

数据提供

使用您的选项自动实例化滑块。您不能以这种方式提供函数，因此唯一的方法是在JS中提供它。一般来说，你要么把所有的选择放在一个地方，要么放在另一个地方，而不是两个地方，这使得这个案例特别令人困惑

您可以看到，

提供的数据

有很好的文档记录（请参阅）。

不确定您要问什么，但您正在创建两个滑块。。注释底部脚本标记内容？我仍然在努力理解你的问题——我在评论中回答了这个问题，你正在创建两个酒吧实例。如果删除底部的脚本标记，它应该可以正常工作（新的滑块…）您在HTML中创建了一个（在document.ready上，它将阴影化为滑块），然后在脚本标记中创建了另一个。@H.Ferrence实际上，它在IE11中甚至没有损坏。这是因为这个JSFIDLE使用ES6语法，IE11似乎不支持ES6语法。如果需要向后兼容性，请考虑不要使用ES6@ H.费伦斯…因为它使用ES6。将其传输或降级为ES5。@H.Ferrence具体而言，它使用和。您将需要将使用这些功能的代码转换为它们的ES5等价物（IE11将支持这一功能）。

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