NumberSpinner

Wrapper for Sitevision number spinner.

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

<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.

<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.

  <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.

<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

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

Svelte 4

<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

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

Svelte 4

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