36 lines
787 B
JavaScript
36 lines
787 B
JavaScript
import React from 'react'
|
|
import { debounce } from '../utils'
|
|
import './PercentageField.css'
|
|
|
|
export default class PercentageField extends React.Component {
|
|
debouncedOnChange = this.props.debounce
|
|
? debounce(this.props.debounce, this.props.input.onChange)
|
|
: this.props.input.onChange
|
|
state = {
|
|
value: this.props.input?.value
|
|
}
|
|
onChange(value) {
|
|
this.setState({ value })
|
|
this.debouncedOnChange(value)
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<input
|
|
className="range"
|
|
onChange={e => this.onChange(e.target.value)}
|
|
type="range"
|
|
value={this.state.value}
|
|
name="volume"
|
|
min="0"
|
|
step="0.05"
|
|
max="1"
|
|
/>
|
|
<span style={{ display: 'inline-block', width: '3em' }}>
|
|
{Math.round(this.state.value * 100)} %
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
}
|