<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="container"> <h3>Different range color slide bootstrap</h3><br/> <div class="row"> <input type="range" id="MaasTercih" class="form-range customRange" /> <br /> <br /> <input type="range" id="Bblue" class="form-range customRange" /> <br/> </div> <button class="btn">Change Color Blue to Green</button> </div>

input[type=range] { accent-color: red; } #Bblue { accent-color: blue; } h3 { font-family: 'Oswald', sans-serif; }

$("button").click(function(){ $("#Bblue").css({"accent-color": "green"}); });