Какая альтернатива в React событию onchange в input type="range"?

Question

[Афанасий]

В html событие onchange в теге срабатывает тогда, когда ползунок передвинут и при этом курсор отжат, в React оно срабатывает только тогда, когда мы сами тащим ползунок, при этом курсор может быть зажат. Мне нужен функционал как в обычном html, есть ли он в React? Спасибо

Comments

[WbICHA]

А зачем? Повесь дебоунс на хэндлер и всё.

[Афанасий]

WbICHA, Вы мой спаситель! Сработало

Answer 1

[Афанасий]

Сделал хук useDebounce

import { useCallback, useEffect, useRef, useState } from "react"

export default function useDebounce(callback, delay: 500) {
    const timer = useRef();

    const debouncedCallback = useCallback((...args) => {
        if(timer.current) {
            clearTimeout(timer.current);
        }

        timer.current = setTimeout(() => {
            callback(...args)
        }, delay);
    }, [callback, delay])

    return debouncedCallback;
}

Закинул туда setState

const [minPrice, setMinPrice] = useState(5000);
    const debouncedMinPrice = useDebounce(setMinPrice, 500);

    const [maxPrice, setMaxPrice] = useState(15000);
    const debouncedMaxPrice = useDebounce(setMaxPrice, 500);

И повесил на обработчик в input

<RangeSlider defaultMax={15000} defaultMin={500} maxValue={20000} priceGap={2500} title="Диапазон цены" 
                                onMaxChange={debouncedMaxPrice} 
                                onMinChange={debouncedMinPrice}/>

Answer 2

[Михаил Р.]

<Element
    type="range"
    value={value}
    onChange={handlerChange}
    onMouseUp={handlerEndInteraction}
    onTouchEnd={handlerEndInteraction}
/>

Comments

[Афанасий]

Благодарю за ответ, но не работает на мобилках и при единичном клике :c

[Alexandroppolus]

Иван, а если onPointerUp ?

[Афанасий]

Alexandroppolus, те же проблемы, что и с MouseUp :c

[Михаил Р.]

Иван,

Благодарю за ответ, но не работает на мобилках и при единичном клике :c

А если так? Обновил ответ.

<Element
    type="range"
    value={value}
    onChange={handlerChange}
    onMouseUp={handlerEndInteraction}
    onTouchEnd={handlerEndInteraction}
/>

[Афанасий]

Михаил Р., Решил не заморачиваться, сделал так, как реакт позволяет, пусть меняется и при зажатом клике. Спасибо за ответы <3