Input showing as text box

[provostj]

I have tried many different examples from the example page but every time, it is coming up as just a text box.

This is the code I am using...

Calling up js and css in head

<link rel="stylesheet" href="css/bootstrap-slider.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script>

HTML

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

Script (tried in head, before and after

<script> // With JQuery
$('#ex1').slider({
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});

// Without JQuery
var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});</script>

Help would be massively appreciated as I am pulling my hair out at the minute.

Thanks

[seiyria]

Please make a jsfiddle

[provostj]

Don't know if I have done this right: https://jsfiddle.net/7ytLkm57/

[seiyria]

If you look at the console, it says $ is not defined, ie, you don't have jQuery but are trying to use jQuery.

[provostj]

Is this all I need to add?

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

[seiyria]

Should be. Or you can not use jquery.

[provostj]

Thanks a lot for that. I knew it would just have been me being stupid. Thanks!