<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script> <div class='container mt-4'> <h1 class='text-center'><a href="https://osmquote.com" title="OSMQuotes">Inspirational Quotes by OSMQuote</a></a></h1> </div> <div class='container mt-4'> <input type="text" class="js-range-slider" name="my_range" value=""/> </div> <footer class='mt-5'> <h4 class='text-center'>By <a href='https://heliconia.io'>Heliconia</a></h4> </footer> <script> $(".js-range-slider").ionRangeSlider({ skin: "round", step: 50, type: "double", grid: true, min: 0, max: 1000, from: 200, to: 800, prefix: "$" }); </script>