diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index 81e036a8b8..06fe05e949 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -1,10 +1,12 @@ -import React, { useState, useEffect } from 'react' // eslint-disable-line +import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line export const Slider = ({ jumpTo, sliderValue, traceLength }) => { const [state, setState] = useState({ currentValue: 0 }) + const onChangeId = useRef(null) + useEffect(() => { setValue(sliderValue) }, [sliderValue]) @@ -18,9 +20,16 @@ export const Slider = ({ jumpTo, sliderValue, traceLength }) => { } const handleChange = (e) => { - const value = parseInt(e.target.value) - - setValue(value) + if (onChangeId.current) { + window.clearTimeout(onChangeId.current) + } + ((value) => { + onChangeId.current = setTimeout(() => { + console.log(value) + value = parseInt(value) + setValue(value) + }, 100) + })(e.target.value) } return (