|
|
@ -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 }) => { |
|
|
|
export const Slider = ({ jumpTo, sliderValue, traceLength }) => { |
|
|
|
const [state, setState] = useState({ |
|
|
|
const [state, setState] = useState({ |
|
|
|
currentValue: 0 |
|
|
|
currentValue: 0 |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onChangeId = useRef(null) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
setValue(sliderValue) |
|
|
|
setValue(sliderValue) |
|
|
|
}, [sliderValue]) |
|
|
|
}, [sliderValue]) |
|
|
@ -18,9 +20,16 @@ export const Slider = ({ jumpTo, sliderValue, traceLength }) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const handleChange = (e) => { |
|
|
|
const handleChange = (e) => { |
|
|
|
const value = parseInt(e.target.value) |
|
|
|
if (onChangeId.current) { |
|
|
|
|
|
|
|
window.clearTimeout(onChangeId.current) |
|
|
|
setValue(value) |
|
|
|
} |
|
|
|
|
|
|
|
((value) => { |
|
|
|
|
|
|
|
onChangeId.current = setTimeout(() => { |
|
|
|
|
|
|
|
console.log(value) |
|
|
|
|
|
|
|
value = parseInt(value) |
|
|
|
|
|
|
|
setValue(value) |
|
|
|
|
|
|
|
}, 100) |
|
|
|
|
|
|
|
})(e.target.value)
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|