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