ブートストラップスライダーは、スライダーの代わりにテキストボックスを表示します。

Question

私は、私のウェブページでスライダーオプションを作成するためにブートストラップスライダーを使用しています。しかし、スライダの代わりにテキストボックスだけが表示されます。どんな助けでも大歓迎です。

以下は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"]'/> 

Answer 1

ライブラリの順序が間違っています。また

、あなたはデータ提供属性逃しdocumentationで見ることができるように：2ブートストラップ

<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"]'/>

Answer 2

ので、あなたの<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>にダウングレードする必要があり、すべてが期待どおりに動作します。

$('#ex1').slider({ 
 
\t formatter: function(value) { 
 
\t \t return 'Current value: ' + value; 
 
\t } 
 
});

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