Custom Range Sliders

Here is a custom range slider I created to use gradients in the slided part and the thumb itself.

DEMO

See the Pen Custom Range Sliders by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div class="slider">
  <span class="slider__indicator"></span>
  <input class="slider__input" id="slider1" type="range" min="1" max="100" value="50" >
</div>

CSS

.slider{
  width: 100%;
  margin-top: 30px;
  position:relative;
  height: 50px;
  
  &::before{
    content: '';
    position: absolute;
    left:0;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
    height: 10px;
    border-radius: 10px;
    background: #E7E7E7;
    z-index:0;
  }
  
  &__indicator{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 10px; 
    width: 0;
    background: linear-gradient(180deg, #988AFF 0%, #5945ED 100%);
    box-shadow: 0px -4.021px 8.042px 0px rgba(0, 0, 0, 0.25) inset, 0px 4.021px 8.042px 0px rgba(255, 255, 255, 0.25) inset;
    border-radius: 10px;
  }
  
  &__input{
    position:absolute;
    margin:0;
    top:50%;
    left:0;
    transform: translateY(-50%);
    z-index:1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0);
    outline: none;
    transition: opacity .2s;
    border-radius: 10px;
    
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 50px;
      height: 50px;
      cursor: pointer;
      background: linear-gradient(180deg, #988AFF 0%, #5945ED 100%);
      box-shadow: 0px -4.021px 8.042px 0px rgba(0, 0, 0, 0.25) inset, 0px 4.021px 8.042px 0px rgba(255, 255, 255, 0.25) inset;
      border-radius: 50%;
    }
    
    &::-moz-range-thumb {
      width: 50px;
      height: 50px;
      background: linear-gradient(180deg, #988AFF 0%, #5945ED 100%);
      box-shadow: 0px -4.021px 8.042px 0px rgba(0, 0, 0, 0.25) inset, 0px 4.021px 8.042px 0px rgba(255, 255, 255, 0.25) inset;
      cursor: pointer;
      transition: 0.23s ease-out;
    }
    
    &:hover{
      &::-webkit-slider-thumb {
        background: linear-gradient(180deg, #7967FF 0%, #3D24F8 100%);
      }
      &::-moz-range-thumb {
       background: linear-gradient(180deg, #7967FF 0%, #3D24F8 100%);
      }
    }
  }
}

JS

const rangeSlider = (slider_id) => {
  var slider = document.getElementById(slider_id);
  var sliderIndicator = slider.parentElement.querySelector('.slider__indicator');
  sliderIndicator.style.width = slider.value + "%";
  
  slider.addEventListener("input", function() {
    var percent = (slider.value - slider.min) / (slider.max - slider.min) * 100;
    sliderIndicator.style.width = percent + "%";
  });
}


window.onload = function () {
  rangeSlider('slider1');  
};