.range-slider{ padding: 15px 60px 7px 0; margin: 10px 0 0 0; position: relative; } .range-slider input[type="range"]{ background: #a29bfe; width: 100%; height: 25px; border-radius: 20px; outline: none; -webkit-appearance: none; } .range-slider input[type="range"]::-webkit-slider-thumb{ background: #6c5ce7; width: 50px; height: 23px; cursor: pointer; border-radius: 20px; transition: all 0.15s ease-in-out 0s; -webkit-appearance: none; appearance: none; } .range-slider input[type="range"]::-webkit-slider-thumb:hover, .range-slider input[type="range"]:active::-webkit-slider-thumb{ box-shadow: 0 0 8px -3px #000 inset; } .range-slider input[type="range"]::-moz-range-thumb{ background: #6c5ce7; width: 50px; height: 23px; border-radius: 20px; border: none; cursor: pointer; transition: all 0.15s ease-in-out 0s; } .range-slider input[type="range"]::-moz-range-thumb:hover, .range-slider input[type="range"]:active::-moz-range-thumb{ box-shadow: 0 0 8px -3px #000 inset; } .range-slider .range-value{ color: #fff; background: #6c5ce7; font-size: 18px; font-weight: 600; text-align: center; text-shadow: 0 0 3px #555; width: 55px; padding: 1px 5px; border-radius: 12px; position: absolute; bottom: 10px; right: 0; } ::-moz-range-track{ background: transparent; border: 0; }
$(document).ready(function(){ var rangeSlider = function(){ var slider = $('.range-slider'), range = $('.range-slider input[type="range"]'), value = $('.range-value'); slider.each(function(){ value.each(function(){ var value = $(this).prev().attr('value'); var max = $(this).prev().attr('max'); $(this).html(value); }); range.on('input', function(){ $(this).next(value).html(this.value); }); }); }; rangeSlider(); });