.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;

  --_track-height: 0.5rem;
  --_track-background-color: var(--button-grey-background-color);
  --_track-border-radius: var(--border-radius-s);

  --_thumb-size: 1.25rem;
  --_thumb-background-color: var(--page-background-color-light);
  --_thumb-border-color: var(--button-grey-background-color);
  --_thumb-border-radius: 50%;

  /* прогресс через CSS-переменную */
  --progress: 30%;
}

/* трек Chrome/Safari */
.range::-webkit-slider-runnable-track {
  height: var(--_track-height);
  border-radius: var(--_track-border-radius);
  background: linear-gradient(
    to right,
    var(--button-contrast-background-color) 0%,
    var(--button-contrast-background-color) var(--progress),
    var(--_track-background-color) var(--progress),
    var(--_track-background-color) 100%
  );
}

/* thumb Chrome/Safari */
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--_thumb-size);
  height: var(--_thumb-size);
  background: var(--_thumb-background-color);
  border-radius: var(--_thumb-border-radius);
  border: 2px solid var(--_thumb-border-color);
  margin-top: calc((var(--_track-height) - var(--_thumb-size)) / 2);
  cursor: pointer;
  position: relative;
}

/* Firefox трек */
.range::-moz-range-track {
  height: var(--_track-height);
  background: var(--_track-background-color);
  border-radius: var(--_track-border-radius);
}

/* Firefox прогресс */
.range::-moz-range-progress {
  background: var(--button-contrast-background-color);
  height: var(--_track-height);
  border-radius: var(--_track-border-radius);
}

/* Firefox thumb */
.range::-moz-range-thumb {
  width: var(--_thumb-size);
  height: var(--_thumb-size);
  background: var(--_thumb-background-color);
  border-radius: var(--_thumb-border-radius);
  border: 2px solid var(--_thumb-border-color);
  cursor: pointer;
}