# NumberSpinner

Wrapper for Sitevision [number spinner](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).

![NumberSpinner](/_astro/NumberSpinner.Ddfue1OV_10MzEj.webp)

## Props

| Prop          | Type                      | Description                                                                                   |
| ------------- | ------------------------- | --------------------------------------------------------------------------------------------- |
| `id`          | `string`                  | Input ID, generated automatically if not provided. **Default:** `generateId()`                |
| `name`        | `string`                  | Name attribute for the spinner. **Default:** `undefined`                                      |
| `label`       | `string`                  | Field label. **Default:** `undefined`                                                         |
| `description` | `string`                  | Description for the number spinner, displayed below the input field. **Default:** `undefined` |
| `min`         | `number`                  | Minimum value for the spinner. **Default:** `undefined`                                       |
| `max`         | `number`                  | Maximum value for the spinner. **Default:** `undefined`                                       |
| `step`        | `number`                  | Step value for the spinner. **Default:** `1`                                                  |
| `suffix`      | `string \| Array<string>` | Suffix for the spinner value. **Default:** `undefined`                                        |
| `disabled`    | `boolean`                 | Whether the spinner is disabled. **Default:** `false`                                         |
| `readonly`    | `boolean`                 | Whether the spinner is readonly. **Default:** `false`                                         |
| `show`        | `boolean`                 | Show and hide the component without re-rendering. **Default:** `true`                         |
| `value`       | `number`                  | Value associated with the spinner. **Default:** \`min                                         |

## Example

```svelte
<script>
  import { Panel, NumberSpinner } from '@soleil-se/config-svelte';
</script>


<Panel heading="Inställningar">
  <NumberSpinner name="spinner" label="Number spinner" min="5" max="10" suffix="px" />
</Panel>
```

Advanced**

> **NOT RECOMENDED**
>
> Usually the usage of `name` is enough for 99% of use cases.

```svelte
<script>
  import { Panel, NumberSpinner } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';


  const { values } = $props();


  values = {
    spinner: '',
    ...values
  };


  onSave(() => values);
</script>


<Panel heading="Inställningar">
  <NumberSpinner bind:value={values.spinner} label="Number spinner" min="5" max="10" />
</Panel>
```

## Suffix

Suffix can be a `string` or an array (`[string, string]`) if singular and plural suffixes are needed.

```svelte
  <NumberSpinner name="height" label="Height" min="1" max="500" suffix="px" />
  <NumberSpinner name="hours" label="Hours" min="1" max="24" suffix={['hour', 'hours']} />
```

## Slots

### Default

Default slot after spinner.

```svelte
<NumberSpinner name="spinner" label="Number spinner" min="5" max="10" />
  <p>Some text.</p>
</NumberSpinner>
```

### Label

Slot for content in the label element.

* Svelte 5

  ```svelte
  <NumberSpinner name="spinner" min="5" max="10">
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </NumberSpinner>
  ```

* Svelte 4

  ```svelte
  <NumberSpinner name="spinner" min="5" max="10">
    <svelte:fragment slot="label">
      Custom <strong>label</strong>
    </svelte:fragment>
  </NumberSpinner>
  ```

### Description

Slot for content in the description element to be used instead of the prop when HTML formatting is needed.

* Svelte 5

  ```svelte
  <NumberSpinner name="spinner" min="5" max="10">
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </NumberSpinner>
  ```

* Svelte 4

  ```svelte
  <NumberSpinner name="spinner" min="5" max="10">
    <svelte:fragment slot="description">
      Custom <strong>description</strong>
    </svelte:fragment>
  </NumberSpinner>
  ```