https://www.ruchikrandhap.com/wp-content/plugins/editor-block-outl…/line-opacity-option.js?ver=1789103451

1function outlineOpacityOption(props) {
2	const { RangeControl } = this.components;
3
4	let currentValue = props.metaValue;
5	const opacityValue = props.outlineOpacityState;
6
7	if (currentValue === undefined) {
8		currentValue = 1;
9	}
10	if (opacityValue !== undefined && opacityValue !== '') {
11		currentValue = opacityValue;
12	}
13
14	return this.el(RangeControl, {
15		value: currentValue,
16		onChange: (value) => {
17			// Convert value to decimal
18			const metaValueDeci = value / 100;
19
20			// Update Editor UI
21			const root = getDocumentRoot();
22			root.style.setProperty('--outline-opacity', metaValueDeci);
23
24			// update state to update control ui
25			props.setState({
26				outlineOpacityState: value,
27			});
28
29			// Debounce so value is only updated in meta once user stops dragging
30			this.debounce(() => {
31				props.setMetaValue(value);
32			})();
33		},
34		min: 10,
35		max: 100,
36	});
37}