<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"> <hr style="border: 10px solid green; border-radius: 5px;" /> <button type="reset" class="form-group btn-success btn-lg btn-block" value="ahmet">Range</button> <div class="slidecontainer"> <input type="range" min="5" max="20" value="10" step='2.5' class="slider" id="myRange" list='tickmarks'> <div id="tickmarks"> <p>5</p> <p>7.5</p> <p>10</p> <p>12.5</p> <p>15</p> <p>17.5</p> <p>20</p> </div> </div> </div>

input:focus{ outline: none; } .slider { -webkit-appearance: none; --range: calc(var(--max) - var(--min)); --ratio: calc((var(--val) - var(--min))/var(--range)); --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em)); margin: 0; padding: 0; width: 100%; height: 1.5em; background: transparent; font: 1em/1 arial, sans-serif; border: none; } .slider, .slider::-webkit-slider-thumb { -webkit-appearance: none; } .slider::-webkit-slider-runnable-track { box-sizing: border-box; border: none; width: 12.5em; height: 0.5em; background: #ccc; } .js .slider::-webkit-slider-runnable-track { background: linear-gradient(#7b1c1a, #7b1c1a) 0/var(--sx) 100% no-repeat #ccc; } .slider::-moz-range-track { box-sizing: border-box; border: none; height: 0.5em; background: #ccc; } .slider::-ms-track { box-sizing: border-box; border: none; width: 12.5em; height: 0.5em; background: #ccc; } .slider::-moz-range-progress { height: 0.5em; background: #7b1c1a; } .slider::-ms-fill-lower { height: 0.5em; background: #7b1c1a; } .slider::-webkit-slider-thumb { margin-top: -0.550em; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7b1c1a; } .slider::-moz-range-thumb { box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7b1c1a; } .slider::-ms-thumb { margin-top: 0; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7b1c1a; } .slider::-ms-tooltip { display: none; } #tickmarks { display: flex; justify-content: space-between; padding: 0 10px; } #tickmarks p { position: relative; display: flex; justify-content: center; text-align: center; width: 1px; background: #D3D3D3; height: 10px; line-height: 40px; margin: 0 0 20px 0; }

const _R = document.querySelector('[type=range]'); _R.style.setProperty('--val', +_R.value); _R.style.setProperty('--max', +_R.max); _R.style.setProperty('--min', +_R.min); document.documentElement.classList.add('js'); _R.addEventListener('input', e => { _R.style.setProperty('--val', +_R.value); }, false);