<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" min="0" max="100" step="1" 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(){ var slideVal = 18; $('#myRange').val(slideVal); $(document).on('input change', '#myRange', function() { $('#slider_value').html( $(this).val() ); }); });