/**
 * RangeField
 *
 * Field wrapper around a range input with its current value.
 *
 * @package Everyone_Accessibility_Suite
 */

import Field from './Field';

function RangeField({ id, label, description, value, min, max, step = 1, unit = '', onChange, disabled = false }) {
	return (
		<Field id={id} label={label} description={description}>
			<div className="evas-range-control">
				<input
					type="range"
					id={id}
					value={value}
					min={min}
					max={max}
					step={step}
					onChange={(e) => onChange(parseInt(e.target.value, 10))}
					disabled={disabled}
				/>
				<span className="evas-range-value">{value}{unit}</span>
			</div>
		</Field>
	);
}

export default RangeField;