Главная причина в том, что вы отключили pointer events для него в CSS (у range.input : pointer-events: none;).
Далее, в value вы отправляете просто константу, более того куда и как он будет обновлять значения?
Обновим немного код, добавив состояния, чтобы потом можно было легко использовать значения в дальнейшей логике.
import * as React from 'react';
import styles from './style.module.scss';
export default function App() {
// состояние для левого
const [leftVal, setLeftVal] = React.useState(2500);
// состояние для правого
const [rightVal, setRightVal] = React.useState(7500);
// Константы для ограничения макс и минимального значения
const MINVAL = 0;
const MAXVAL = 10000;
return (
<div className={styles.main}>
<div className={styles.slider}>
<div className={styles.slider__progress} />
</div>
<div className={styles.range}>
<input
type="range"
name="range-min"
min={MINVAL}
max={MAXVAL}
value={leftVal}
onChange={(e) => setLeftVal(parseInt(e.target.value))}
/>
<input
type="range"
name="range-max"
min={MINVAL}
max={MAXVAL}
value={rightVal}
onChange={(e) => setRightVal(parseInt(e.target.value))}
/>
</div>
</div>
);
}
Далее, у вас теперь будет работать только последний(по порядку в коде html/jsx ), тк он будет "наверху" и события мышки просто не могут достучаться до второго. Более того, логика работы нарушается, например он может быть меньше своего левого брата, что не ок. Ну и ещё МНОГО подводных камней. Вся проблема в том, что сам стандартный элемент input range поддерживает только одно значение, а вам нужно да. Логика испольнения этого не то чтобы сложна, но таки не совсем тривиально, нужно немного поработать.
Вот ссылка, можете
изучить пример если идти по вашему пути.
Либо как
это делают через другие html элементы(условно на div), эмулируя порведение.
На мой взгляд гибое дело с этим возиться, если у вас только не личный интерес поиграться. Если для дела - то берите готовую библиотеку + во всех(или почти всех) UI библиотека он тем или другим способом реализован.
Средний
