use onMouseUp

libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx

@@ -1,35 +1,28 @@
 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)
+  const slider = useRef(null)
 
   useEffect(() => {
     setValue(sliderValue)
   }, [sliderValue])
 
   const setValue = (value) => {
-    if (value === state.currentValue) return
+    if (value === slider.current.value) return
-    setState(prevState => {
+    slider.current.value = value
-      return { ...prevState, currentValue: value }
-    })
-    jumpTo && jumpTo(value)
-  }
-
-  const handleChange = (e) => {
     if (onChangeId.current) {
-      window.clearTimeout(onChangeId.current)
+      clearTimeout(onChangeId.current)
     }
     ((value) => {
       onChangeId.current = setTimeout(() => {
-        console.log(value)
+        jumpTo && jumpTo(value)
-        value = parseInt(value)
-        setValue(value)
       }, 100)
-    })(e.target.value)    
+    })(value)
+  }
+
+  const handleChange = (e) => {
+    setValue(parseInt(e.target.value))
   }
 
   return (
@@ -37,11 +30,11 @@ export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
       <input id='slider'
         data-id="slider"
         className='w-100 my-0'
+        ref={slider}
         type='range'
         min={0}
         max={traceLength ? traceLength - 1 : 0}
-        value={state.currentValue}
+        onMouseUp={handleChange}
-        onChange={handleChange}
         disabled={traceLength ? traceLength === 0 : true}
       />
     </div>