IkePr IkePr - 10 days ago 5
CSS Question

Bootstrap slider - CSS not showing properly

Okay, I've downloaded the Bootstrap slider: https://github.com/seiyria/bootstrap-slider
I got into \bootstrap-slider-master\dist and copied the bootstrap-slider.js and the bootstrap-slider.min.js into my js folder. I also copied the bootstrap-slider.css and the bootstrap-slider.min.css into my css folder.

I now tried the example 7, check the top link and go to examples.
But there is a problem.

This is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Test bootstrap slider </title>

<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/bootstrap-slider.min.css" rel="stylesheet">

</head>
<body>

<div class="container">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="js/bootstrap-slider.min.js"></script>
<script>
$("#ex7").slider();

</script>
</body>
</html>


This is the result:
My result in browser (click)
The text is there and the radio button, but I cannot see the slider. I think the css is the problem, but I've implemented it in the head after the bootstrap css. So I don't know why won't it work.

Answer

You put this wrong: <script type="js/bootstrap-slider.min.js"></script>.Not type, src. It should be:

<script src="js/bootstrap-slider.min.js"></script>

Try it now!