I am using bootstrap-slider to create a slider option in my webpage. But it shows only text box instead of slider. Any help is greatly appreciated.
Below is the 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
Answers
so you need to downgrade your
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
to<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and everything works as expected.The order of libraries is wrong.
Moreover, like you can see in documentation you missed the data-provide attribute: