body {
  --slider-thumb-height: 20px;
  --slider-thumb-width: 20px;
  --slider-track-height: 12.8px;
  --slider-track-color: green;
  --slider-thumb-color: white;
  --slider-thumb-radius: 50%;
  --hue-color: red;
}

input[type="range"] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background: transparent;
}
input[type="range"]:disabled {
  --slider-thumb-color: hsl(0deg 0% 90%);
}

input[type="range"]::selection {
  background: none;
}
/* For Mozilla Firefox */
input[type="range"]::-moz-selection {
  background: none;
}

input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--slider-track-height);
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: var(--slider-track-color);
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 1px 1px 2px #666666, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: var(--slider-thumb-height);
  width: var(--slider-thumb-width);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: calc((var(--slider-thumb-height) / 4) * -1);
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--slider-track-color);
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: var(--slider-track-height);
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: var(--slider-track-color);
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: var(--slider-thumb-height);
  width: var(--slider-thumb-width);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: var(--slider-track-height);
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: var(--slider-thumb-width) 0;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: var(--slider-track-color);
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type="range"]::-ms-fill-upper {
  background: var(--slider-track-color);
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: var(--slider-thumb-height);
  width: var(--slider-thumb-width);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  cursor: pointer;
}
input[type="range"]:focus::-ms-fill-lower {
  background: var(--slider-track-color);
}
input[type="range"]:focus::-ms-fill-upper {
  background: var(--slider-track-color);
}