38 lines
855 B
TypeScript
38 lines
855 B
TypeScript
import { formatValue } from 'Engine/format'
|
|
import React, { useCallback, useState } from 'react'
|
|
import { debounce as debounceFn } from '../utils'
|
|
import './PercentageField.css'
|
|
|
|
export default function PercentageField({ onChange, value, debounce = 0 }) {
|
|
const [localValue, setLocalValue] = useState(value)
|
|
const debouncedOnChange = useCallback(
|
|
debounce ? debounceFn(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' }}>
|
|
{formatValue({
|
|
value: localValue,
|
|
unit: '%'
|
|
})}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|