如何实现seiyria引导滑块
如何实现seiyria引导滑块
提问于 2017-02-23 15:16:15
我得到两个相同的滑块重叠。我只想要一个滑块。
不知道如何实现这个插件。有人成功地使用过它吗？
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>在Chrome (最新版)和IE (最新版)中的外观如下：
My jsFiddle: https://jsfiddle.net/kretrjgz/
回答 2
Stack Overflow用户
发布于 2017-02-23 15:55:25
您正在创建滑块的两个实例。
如果您移除底部的脚本标记，它应该可以正常工作。
<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个滑块。如预期的那样。
这些文档真的很容易用例子和烟花之类的东西来模仿：
Stack Overflow用户
发布于 2017-02-23 16:55:05
从标记中删除data-provider="slider"：https://jsfiddle.net/kretrjgz/2
data-provide使用您的选项自动实例化滑块。您不能以这种方式提供函数，所以唯一的方法就是在JS中提供它。一般来说，你要么把你所有的选项放在一个地方，要么放在另一个地方，而不是两个地方，这就是为什么这件事特别令人困惑的地方。
您可以看到，data-provide已经有了很好的文档(参见例19)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42419636
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号