<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 ----------> <div class="slideContainer"> <label class="range_value"><span id="value"></span></label> <input type="range" min="0" max="100" value="1" class="slider" id="myRange"> </div>

input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; border: 1px solid #000000; height: 20px; width: 20px; border-radius: 50%; border-radius: 3px; background: #000; cursor: pointer; } .range_value{ padding: 4px 25px; border: 2px solid #000; background-color: #fff; color: #000; border-radius: 8px; font-weight: 400; position: relative; } .range_value::after{ content: " "; position: absolute; top: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: black #9a9a9a00 transparent transparent; } .slider { -webkit-appearance: none; width: 150px; height: 20px; background: linear-gradient(90deg, rgb(0, 0, 0) 5%, rgb(214, 214, 214) 0%); outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; border-radius: 5px; border: 1px solid #9e9e9e; } /*.slider::after { content: "100"; color: white; font-size: 2rem; position: absolute; left: 80%; top: 26%; } .slider::before { content: "0"; color: white; font-size: 2rem; position: absolute; left: 12%; top: 26%; }*/ .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: white; cursor: pointer; border-radius: 50%; } .slider::-moz-range-thumb { width: 40px; height: 40px; background: white; cursor: pointer; border-radius: 50%; }

var slider = document.getElementById("myRange"); var output = document.getElementById("value"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } slider.addEventListener("mousemove", function() { var x = slider.value; var color = 'linear-gradient(90deg, rgb(0, 0, 0)' + x + '% , rgb(214, 214, 214)' + x + '%)'; slider.style.background = color; });