Range

TwebBlockRangeControl

{ label, help, min, max, step, name*, beforeIcon, onChange, attributes*, setAttributes* }

/**
 * @param {string} [label] - Component label.
 * @param {string} [help] - Component description.
 * @param {number} [min] - Minimum value (default: 0).
 * @param {number} [max] - Maximum value (default: 100).
 * @param {number} [step] - Step value (default: 1).
 * @param {string} name - Attribute name.
 * @param {React.ReactNode} [beforeIcon] - Icon before the slider.
 * @param {function} [onChange] - Callback called when the value changes.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */

block.json

"testRange": {
	"type": "integer",
	"default": 3
}

index.js

import {
	TwebBlockRangeControl,
} from '@tigriweb/components/attributes';

index.js | edit()

<TwebBlockRangeControl
	label={ __('Range Label', 'your-theme-name') }
	help={ __('Range Description', 'your-theme-name') }
	min="3"
	max="13"
	step="2"
	name="testRange"
	{ ...{ attributes, setAttributes } }
/>