"slider vith bs40 v2"
Bootstrap 4.0.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <body class="bg-light"> <div class="container mt-5"> <h4>Slider range (Costumize bg colors)</h4> <div class="range-slider mt-4"> <input type="range" id="myRange" min="1" max="100" value="18"> </div> <div class="card mt-4 border-danger"> <div class="card-body text-center"> <h2 class="mb-0">% <span id="slider_value">18</span></h2> </div> </div> </div> <style> .range-slider { --track-height: 10px; --thumb-size: 28px; --track-color: #cfcfcf; --fill-color: #ff0000; } .range-slider input[type=range] { transition: background 0.2s ease; } .range-slider input[type=range] { transition: background 0.2s ease; } .range-slider input[type=range] { -webkit-appearance: none; width: 100%; height: var(--track-height); border-radius: 50px; outline: none; background: linear-gradient(var(--fill-color), var(--fill-color)) 0/0% 100% no-repeat, var(--track-color); } /* Track */ .range-slider input[type=range]::-webkit-slider-runnable-track { height: var(--track-height); border-radius: 50px; } .range-slider input[type=range]::-moz-range-track { height: var(--track-height); background: var(--track-color); border-radius: 50px; } /* Thumb */ .range-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; background: var(--fill-color); cursor: pointer; border: none; /* cember kenarı */ border: 2px solid #9B0000; box-shadow: 0 4px 10px rgba(0,0,0,0.25); /* </style> </body>
$(document).ready(function(){ const slider = document.getElementById("myRange"); function updateSlider() { const min = slider.min || 0; const max = slider.max || 100; const val = slider.value; const percent = ((val - min) / (max - min)) * 100; slider.style.background = `linear-gradient(#ff0000, #ff0000) 0/${percent}% 100% no-repeat, #cfcfcf`; $('#slider_value').text(val); } slider.addEventListener("input", updateSlider); updateSlider(); });

Questions / Comments: