Range Slider CSS Generator

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #333355;
  border-radius: 3px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #6366f1;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #6366f1;
  cursor: pointer;
}

input[type="range"]::-moz-range-progress {
  background: #6366f1;
  height: 6px;
  border-radius: 3px;
}