Forms

Slider

A range input with single or dual thumbs, tooltips, colors, sizes, and vertical orientation.

Playground

Experiment with different props in real-time.

Basic Usage

Single thumb slider.

<script lang="ts">
  import { Slider } from 'sv5ui';

  let value = $state(50);
</script>

<Slider bind:value />

Range

Pass an array for dual-thumb range selection.

<script lang="ts">
  import { Slider } from 'sv5ui';

  let range = $state([25, 75]);
</script>

<Slider bind:value={range} />

Min, Max & Step

Customize range and step increment.

<Slider min={0} max={1000} step={50} value={500} />
<Slider min={-50} max={50} step={10} value={0} />

Sizes

5 track/thumb sizes.

xs

sm

md

lg

xl

<Slider size="xs" value={50} />
<Slider size="sm" value={50} />
<Slider size="md" value={50} />
<Slider size="lg" value={50} />
<Slider size="xl" value={50} />

Colors

Semantic color schemes.

primary

success

warning

error

<Slider color="primary" value={60} />
<Slider color="success" value={60} />
<Slider color="warning" value={60} />
<Slider color="error" value={60} />

Tooltip

Show value tooltip above thumbs.

50
20 80
<Slider tooltip value={50} />
<Slider tooltip value={[20, 80]} />

Vertical

Vertical orientation.

30 70
<div class="flex gap-8 h-48">
  <Slider orientation="vertical" value={60} />
  <Slider orientation="vertical" value={[30, 70]} tooltip />
</div>

Disabled

<Slider disabled value={40} />

Controlled

Two-way binding with bind:value.

50

Value: 50

<script lang="ts">
  import { Slider } from 'sv5ui';

  let value = $state(50);
</script>

<Slider bind:value tooltip />
<p>Value: {value}</p>

UI Slots

Use the ui prop to override classes on internal elements.

SlotDescription
rootRoot wrapper
baseBase container
trackTrack element
rangeRange fill
thumbThumb elements
tooltipTooltip elements

Props

PropTypeDefault
valuenumber | number[]0
minnumber0
maxnumber100
stepnumber1
orientation'horizontal' | 'vertical''horizontal'
colorColorType'primary'
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
tooltipbooleanfalse
disabledbooleanfalse
autoSortbooleantrue
onValueChange(value) => void-
onValueCommit(value) => void-
namestring-
refHTMLElement | nullnull
classstring-
uiRecord<Slot, Class>-
SelectMenu Switch