# Number

[TwebBlockNumberControl](https://github.com/tigriweb/components/blob/master/attributes/TwebBlockNumberControl.js)

<div align="left" data-full-width="false"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FLN1iGsK6sMVZMIJKsDqj%2Fnumber.jpg?alt=media&#x26;token=5d923399-e737-416c-8241-adc2f257ee83" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FNqtDG7jE7ioylD2R5OMh%2Fnumber-custom.jpg?alt=media&#x26;token=9afa571b-ee92-44fb-a633-8d3a7da03fe9" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>{ label, help, min, max, step, dragDirection, dragThreshold, spinControls, isDragEnabled, labelPosition, required, name*, onChange, attributes*, setAttributes* }</summary>

```jsx
/**
 * @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} [dragDirection] - Determines the drag axis "s", "n", "e", "w".
 * @param {number} [dragThreshold] - If isDragEnabled is true, this controls the amount of px to have been dragged before the drag gesture is actually triggered.
 * @param {string} [spinControls] - The type of spin controls to display. These are buttons that allow the user to quickly increment and decrement the number: "none", "custom", "native".
 * @param {boolean} [isDragEnabled] - If true, enables mouse drag gestures.
 * @param {string} [labelPosition] - The position of the label.
 * @param {boolean} [required] - If true enforces a valid number within the control's min/max range. If false allows an empty string as a valid value.
 * @param {string} name - Attribute name.
 * @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.
 */
```

</details>

{% code title="block.json" overflow="wrap" %}
```json
"testNumber": {
	"type": "integer",
	"default": 3
}
```
{% endcode %}

{% code title="index.js" overflow="wrap" %}
```jsx
import {
	TwebBlockNumberControl,
} from '@tigriweb/components/attributes';
```
{% endcode %}

{% code title="index.js | edit()" %}
```jsx
<TwebBlockNumberControl
	label={ __('Number Label', 'your-theme-name') }
	help={ __('Number Description', 'your-theme-name') }
	min="3"
	max="13"
	step="2"
	name="testNumber"
	{ ...{ attributes, setAttributes } }
/>
```
{% endcode %}
