After downloading the Bootstrap slider from this link: https://github.com/seiyria/bootstrap-slider, I navigated to \bootstrap-slider-master\dist and transferred the bootstrap-slider.js and bootstrap-slider.min.js files to my js folder. Additionally, I moved the bootstrap-slider.css and bootstrap-slider.min.css files to my css folder.
I decided to test out example 7 by visiting the examples page, but encountered an issue.
Here's the code snippet:
<!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>
View the outcome here: My result in browser (click). Although the text and radio button appear, the slider itself is not visible. I suspect the css may be causing the issue, but I have included it in the head section after the bootstrap css. Thus, I'm unsure why it's not functioning as expected.