skip to Main Content

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


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

    $('#ex1').slider({
    	formatter: function(value) {
    		return 'Current value: ' + value;
    	}
    });
    <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"/>
    Login or Signup to reply.
  2. The order of libraries is wrong.

    Moreover, like you can see in documentation you missed the data-provide attribute:

    <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"]'/>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search