# ghostkit/3.7.2/gutenberg/components/range-control/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.7.2. 68 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.7.2/code/gutenberg/components/range-control/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.7.2/raw/gutenberg/components/range-control/index.js
- Modified: 2026-08-26T18:35:36+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.7.2/code/gutenberg/components/range-control/index.js#L10-L20`.

```javascript
import { BaseControl, RangeControl, TextControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';

/**
 * Component Class
 *
 * @param root0
 * @param root0.allowCustomMin
 * @param root0.allowCustomMax
 * @param root0.label
 */
export default function CustomRangeControl({
	allowCustomMin,
	allowCustomMax,
	label,
	...props
}) {
	const [min, setMin] = useState(parseFloat(props.min) || 0);
	const [max, setMax] = useState(parseFloat(props.max) || 100);

	useEffect(() => {
		if (allowCustomMin && props.value && props.value < min) {
			setMin(props.value);
		}
		if (allowCustomMax && props.value && props.value > max) {
			setMax(props.value);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [props.value]);

	if (allowCustomMin || allowCustomMax) {
		return (
			<BaseControl
				id={label}
				label={label}
				className="ghostkit-component-range-control"
			>
				<RangeControl
					{...props}
					min={min}
					max={max}
					withInputField={false}
				/>
				<TextControl
					type="number"
					value={props.value}
					min={min}
					max={max}
					step={props.step}
					onChange={(val) => {
						const result = val === '' ? undefined : parseFloat(val);

						if (!allowCustomMin && val < min) {
							props.onChange(min);
						} else if (!allowCustomMax && val > max) {
							props.onChange(max);
						} else {
							props.onChange(result);
						}
					}}
				/>
			</BaseControl>
		);
	}

	return <RangeControl {...props} label={label} min={min} max={max} />;
}

```