import "./styles.css";
import React, { useState, useEffect, useRef } from 'react';

export default function App() {
  const [value, setValue] = useState(1);
  const rangeRef = useRef(null);

  const handleChange = (e) => {
    setValue(parseInt(e.target.value));
  };

  useEffect(() => {
    const rangeElement = rangeRef.current;
    const rangeWidth = (value / 20) * rangeElement.offsetWidth;

    rangeElement.style.setProperty("--range-width", `${rangeWidth}px`);
  }, [value]);

  return (
    <div className="App">
      <input
        type="range"
        min="1"
        max="20"
        value={value}
        onChange={handleChange}
        ref={rangeRef}
      />
    </div>
  );
}

.App {
  text-align: center;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  margin-top: -6px;
  margin-left: -2px;
  width: 35px;
  height: 15px;

  background: #fbb03b;
  border-radius: 6px;

  cursor: ew-resize;
}
input[type="range"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -2px;
  width: 0;
  height: 3px;
  background-color: red; /* Здесь можно изменить цвет */
  transform: translateY(-50%);
  transition: width 0.3s ease-in-out; /* Добавьте плавный переход */
  z-index: -1; /* Добавить z-index: -1 */
}

input[type="range"]::before {
  /* ... */
  width: var(--range-width, 0);
}
input[type="range"] {
  -webkit-appearance: none;
  position: relative; /* Добавить position: relative */
}