<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"> <h2>Range bar</h2> <br /> <center style="font-size: 40px;font-weight:bold;color:#000">%<span id="valBox" class=""></span> </center> <br /> <input type="range" id="MaasTercih" class="form-range styled-slider mto" min="1" max="50" value="18" oninput="showVal(this.value)" onchange="showVal(this.value)"> </div> </div>

.styled-slider{ -webkit-appearance: none; width: 100%; height: 12px; border-radius: 6px; outline: none; background: #ccc; } /* Webkit Track */ .styled-slider::-webkit-slider-runnable-track{ height: 12px; border-radius: 6px; } /* 34px THUMB */ .styled-slider::-webkit-slider-thumb{ -webkit-appearance: none; width: 36px; height: 36px; border-radius: 50%; background: #d10000; border: 4px solid #FFC107; box-shadow: 0 3px 8px rgba(0,0,0,0.35); cursor: pointer; margin-top: -14px; /* TAM ORTA */ } /* Firefox */ .styled-slider::-moz-range-track{ height: 12px; background: #ccc; border-radius: 6px; } .styled-slider::-moz-range-thumb{ width: 36px; height: 36px; border-radius: 50%; background: #d10000; border: 4px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.35); cursor: pointer; } /* Firefox progress */ .styled-slider::-moz-range-progress { background-color: #d10000; height: 12px; border-radius: 6px; }

function showVal(newVal){ // Yazıyı güncelle $("span[id=valBox]").text(newVal); // Hidden input değer ata $("input[name=values]").val(newVal); // Progress hesapla var slider = document.getElementById("MaasTercih"); var min = slider.min; var max = slider.max; var percent = ((newVal - min) / (max - min)) * 100; slider.style.background = "linear-gradient(to right, #d10000 " + percent + "%, #ccc " + percent + "%)"; // Buton tetikle $('button#hesapla').trigger('click'); // Focus ver // $(".mto").focus(); } // Sayfa açıldığında başlangıç dolumunu ayarla $(document).ready(function(){ showVal($("#MaasTercih").val()); });