input[type='range'] {
  height: 2ch;
  border-radius: 1ch;
  background: red;
}
input[type='range']:focus {
  outline: 2px solid darkred;
}
input[type='range']:before {
  left: calc(50% - 0.25ch);
  top: -2ch;
  width: 0.5ch;
  border-radius: 0.25ch;
  height: 6ch;
  background: red;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  appearance: none;
  width: 4ch;
  height: 4ch;
  border-radius: 50%;
  background: red;
  cursor: url('../../assets/icons/cursor/move-horizontal.svg') 16 16, ew-resize;
}
input[type='range']::-moz-range-thumb {
  position: relative;
  appearance: none;
  width: 4ch;
  height: 4ch;
  border-radius: 50%;
  background: red;
  cursor: url('../../assets/icons/cursor/move-horizontal.svg') 16 16, ew-resize;
}