Slider

A draggable range input — pick a number or a [min, max] pair. A form field (wears FieldChrome), on the shared variant/size axes, drawn from --ui-* tokens. Drag, click the track, or focus a thumb and use the arrow / Page / Home / End keys.

Single value

Volume

<script>
  import { Slider } from '@spaethtech/svelte-ui';
  let volume = $state(60);
</script>

<Slider bind:value={volume} label="Volume" showValue />

Range (dual thumb)

Price

$200–$750

<script>
  import { Slider } from '@spaethtech/svelte-ui';
  let price = $state([200, 750]);
</script>

<!-- range (or a tuple value) → two thumbs that can't cross -->
<Slider bind:value={price} range min={0} max={1000} step={10}
  label="Price" showValue format={(n) => '$' + n} />

Custom step + formatted value

Quality

High

<script>
  import { Slider } from '@spaethtech/svelte-ui';
  let quality = $state(2);
  const LABELS = ['Low', 'Medium', 'High', 'Ultra'];
</script>

<Slider bind:value={quality} min={0} max={3} step={1}
  label="Quality" showValue format={(n) => LABELS[n]} />

Variants

primary

secondary

success

info

warning

danger

Sizes & states

Disabled