<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;margin-top:25px"> <div class="row"> <input type="range" id="myRange" min="1" max="50" value="18" step="1" class="simple-slider"> <br><br> <div class="well" style="border-color:red;"> <center class="h1">% <span id="slider_value">18</span></center> </div> </div> </div>

.simple-slider{ -webkit-appearance: none; width: 100%; height: 12px; /* bar kalınlığı */ border-radius: 6px; outline: none; background: #ccc; } /* Webkit Track */ .simple-slider::-webkit-slider-runnable-track{ height: 12px; border-radius: 6px; } .simple-slider::-webkit-slider-thumb{ -webkit-appearance: none; width: 42px; /* büyüttük */ height: 42px; /* büyüttük */ border-radius: 50%; background: #d10000; border: 5px solid #7E5000; box-shadow: 0 3px 8px rgba(0,0,0,0.35); cursor: pointer; /* ORTALAMA FORMÜLÜ */ margin-top: -15px; } /* Firefox */ .simple-slider::-moz-range-track{ height: 12px; background: #ccc; border-radius: 6px; } .simple-slider::-moz-range-thumb{ width: 42px; height: 42px; border-radius: 50%; background: #d10000; border: 5px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.35); cursor: pointer; } /* Firefox progress */ .simple-slider::-moz-range-progress { background-color: #d10000; height: 12px; border-radius: 6px; }

$(document).ready(function(){ var slider = document.getElementById("myRange"); var output = document.getElementById("slider_value"); function updateSlider() { var value = slider.value; var min = slider.min; var max = slider.max; var percent = ((value - min) / (max - min)) * 100; slider.style.background = "linear-gradient(to right, #d10000 " + percent + "%, #ccc " + percent + "%)"; output.innerHTML = value; } slider.addEventListener("input", updateSlider); updateSlider(); });