body {
  --input-width: 100%;
  --input-width-segment: 2em;
}

input[type='range'] {
  display: block;
  border: solid 0 transparent;
  width: 100%; /* Резиновая ширина */
  height: var(--input-width-segment);
  border-radius: .25em;
  background: transparent;
  font-size: 1em;
  cursor: pointer;
  margin: 10px 0;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  width: 100%;
  height: 0.375em;
  /* Градиент шкалы */
  background: linear-gradient(90deg, #E75A7C, #F59E0B, #10B981);
  border-radius: 5px;
}

input[type='range']::-webkit-slider-thumb {
  margin-top: -0.8125em;
  box-sizing: border-box;
  width: var(--input-width-segment);
  height: var(--input-width-segment);
  border-radius: 50%; /* Круглый ползунок вместо ромба, более современно */
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 2px solid #E75A7C;
}

/* Поддержка Firefox */
input[type='range']::-moz-range-track {
  width: 100%;
  height: 0.375em;
  background: linear-gradient(90deg, #E75A7C, #F59E0B, #10B981);
  border-radius: 5px;
}

input[type='range']::-moz-range-thumb {
  width: var(--input-width-segment);
  height: var(--input-width-segment);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #E75A7C;
}

input[type='range']:focus {
  outline: none;
}