function VolumeUiSlider() {
  const volumeLevel = React.useRef();
  const volumeSlider = React.useRef();
  const volumeFader = React.useRef();
  const [volumeState, setVolumeState] = React.useState(50);

  function changeVolume() {
    setVolumeState(volumeSlider.current.value);
  }

  React.useEffect(() => {
    if (volumeFader) {
      volumeFader.current.style.bottom = `${volumeState * 0.75}px`;
    }
    if (volumeLevel) {
      volumeLevel.current.style.height = `${volumeState * 0.75}px`;
    }
  }, [volumeState]);

  return (
    <div className={"volume-display"}>
      <span>{volumeState}</span>
      <div className="control-2">
        <span className="eq eq-2">
          <span className="eq-level" ref={volumeFader}>
            <div className={'texture'} />
          </span>
        </span>
        <div className={"pl2-volume-level"} ref={volumeLevel}></div>
        <input
          id={"range-input"}
          className={"pl2-slider-input"}
          type={"range"}
          min={"0"}
          max={"100"}
          step={"1"}
          ref={volumeSlider}
          onChange={changeVolume}
        ></input>
      </div>
    </div>
  );
}