Bootstrap-Slider显示文本框而不是滑块

时间:2017-02-27 12:24:55

标签: javascript jquery html twitter-bootstrap

我正在使用bootstrap-slider在我的网页中创建一个滑块选项。但它只显示文本框而不是滑块。非常感谢任何帮助。

以下是JSFiddle。

https://jsfiddle.net/wzndt6La/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/
bootstrap-slider.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/2.3.2/js/bootstrap.js"></script>

<p>Slider Box</p>
<input id="ex13" type="text" data-slider-ticks="[0, 100, 200, 300, 400]"
 data-slider-ticks-snap-bounds="30" 
data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>

2 个答案:

答案 0 :(得分:3)

图书馆的顺序是错误的。

此外,就像您在documentation中看到的那样,您错过了 数据提供 属性:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>


<input id="ex13" type="text"
       data-provide="slider"
       data-slider-ticks="[0, 100, 200, 300, 400]"
       data-slider-ticks-snap-bounds="30"
       data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>

答案 1 :(得分:1)

因此您需要将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>降级为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>,一切正常。

&#13;
&#13;
$('#ex1').slider({
	formatter: function(value) {
		return 'Current value: ' + value;
	}
});
&#13;
<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.7.2/bootstrap-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.css" rel="stylesheet"/>

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
&#13;
&#13;
&#13;