<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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="container"> <div class="row" style="margin:10px"> <h2>Slider range Background color simple.</h2> <div class="chrome"> <input type="range" class="sliderGreen" id="myRange"/> <br> <div class="well" style="border-color: green;"><center class="h1">% <span id="slider_value">18</span></center></div> </div> </div> </div>

.sliderGreen{ accent-color: green; }

$(document).ready(function(){ $(document).on('input change', '#myRange', function() { $('#slider_value').html( $(this).val() ); }); /* var slider = document.getElementById("myRange"); var output = document.getElementById("slider_value"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } */ });