CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Muiter
Muiter

Reputation: 1520

Bootstrap-slider dispalying an form field

I am trying to implement a slider but fore reason only an input field is displayed.

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://github.com/seiyria/bootstrap-slider

http://seiyria.com/bootstrap-slider/

I have added:

bootstrap-slider.js
bootstrap-slider.css

What else besides an small piece of JS

<script type="text/javascript">
$('#ex1').slider({
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});
</script>

And the code itself?

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

Please advice?

JS Fiddle

Upvotes: 0

Views: 641

Answers (1)

Luke Thompson
Luke Thompson

Reputation: 406

You will need to include jQuery, add this before you include bootstrap-slider.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

You will also need to wait for jQuery before you initilize your slider

<script type="text/javascript">
  $(document).ready(function() {
    $('#ex1').slider({
      formatter: function(value) {
        return 'Current value: ' + value;
      }
    });
  });
</script>

Upvotes: 3

Related Questions