NumberSpinner

Wrapper for Sitevision number spinner.

Props

export let id = generateId();
export let name;
export let label;
export let min;
export let max;
export let step = 1;
export let suffix;
export let disabled = false;
export let readonly = false;
export let show = true;
export let value = min || 1;
export let class = '';

Example

Standard

<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

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

  const values = {
    spinner: '',
    ...window.CONFIG_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 class="help-block">Some helpful text.</p>
</NumberSpinner>

Label

Slot for content in the label element.

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