import React, { useCallback, useState } from 'react' import { formatPercentage } from 'Engine/format' import './PercentageField.css' export default function PercentageField({ onChange, value, debounce }) { const [localValue, setLocalValue] = useState(value) const debouncedOnChange = useCallback( debounce ? debounce(debounce, onChange) : onChange, [debounce, onChange] ) return ( <div> <input className="range" onChange={e => { const value = e.target.value setLocalValue(value) debouncedOnChange(value) }} type="range" value={localValue} name="volume" min="0" step="0.05" max="1" /> <span style={{ display: 'inline-block', width: '3em' }}> {formatPercentage(localValue)} </span> </div> ) }