const Input = styled.input`
    display: block;
  `;

  const [slider, setSlider] = useState(25);

  const onSlide = (e) => {
    setSlider(e.target.value);
  };
  

Когда я вернусь

<input type="range" name="slider" min="1" max="60" value={slider} onChange={onSlide}/>

Это работает

<Input type="range" name="slider" min="1" max="60" value={slider} onChange={onSlide}/>

Ползунок больше не скользит, я не понимаю, почему

Проблема

Вероятно, вы определили стиль Input в своей функции рендеринга. Он должен быть определен извне.

Определите компоненты в стиле вне метода визуализации

Важно определять ваши стилизованные компоненты вне метода рендеринга, иначе он будет воссоздаваться на каждом проходе рендеринга. Определение стилизованного компонента в методе рендеринга помешает кэшированию и резко замедлит скорость рендеринга, и этого следует избегать.

Решение

Определить Input вне любой функции рендеринга.

Помните, что все тело функционального компонента — это функция рендеринга.

 const Input = styled.input`
  display: block;
`;

function App() {
  const [slider, setSlider] = useState(25);

  const onSlide = (e) => {
    setSlider(e.target.value);
  };

  return (
    <div className="App">
      ...

      <Input
        type="range"
        name="slider"
        min="1"
        max="60"
        value={slider}
        onChange={onSlide}
      />

      ...
    </div>
  );
}
  

Я создал изолированную среду с приведенным ниже кодом, и она работает. Я ввел имя класса с именем slider.

 import React, { useState } from "react";
import styled from "styled-components";

const Styles = styled.div`

  .slider { 
    display: block;
  }
`;

const App = () => {
  const [state, setState] = useState(100);

  const handleOnChange = (e) => {
    setState(e.target.value);
  };

  return (
    <Styles>
      <input
        type="range"
        min={0}
        max={255}
        value={state}
        className="slider"
        onChange={handleOnChange}
      />
      <div className="value">{state}</div>
    </Styles>
  );
};
export default App;