Slider

Form

Range input with a draggable thumb, value tooltip, step support, keyboard navigation, and six track animation styles.

Import

ts 
import Slider from '$lib/components/Slider.svelte';

Usage

Basic 40
Volume 72

0 — 100

Hidden value
svelte 
<script lang="ts">
  let volume = $state(50);
</script>

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

Steps & Range

Control snapping granularity with step. Supports integers and decimals. Use min / max to set the range.

Step 25 25
Decimal 3.5
Speed 1.0

0.5x — 3x

svelte 
<Slider bind:value={step} label="Step 25" min={0} max={100} step={25} />
<Slider bind:value={decimal} label="Decimal" min={0} max={10} step={0.1} />
<Slider bind:value={speed} label="Speed" min={0.5} max={3} step={0.5} hint="0.5x — 3x" />

Animations

Drag the slider to one side and release to see the easing style. spring, elastic, and bounce produce visible overshoot effects.

none 50
svelte 
<!-- Release the thumb to see overshoot/bounce behavior -->
<Slider bind:value animation="spring" />
<Slider bind:value animation="elastic" />
<Slider bind:value animation="bounce" />

Disabled

Pass disabled to disable all pointer and keyboard interaction.

Disabled 65
svelte 
<Slider value={65} label="Disabled" disabled />

onChange Callback

Use onchange to react to value changes without two-way binding.

svelte 
<Slider
  bind:value={volume}
  label="Volume"
  onchange={(v) => console.log('new value:', v)}
/>

Example — Image Settings

A realistic use case with multiple sliders and action buttons.

Image Settings
Brightness 80
Contrast 50
Saturation 60

Keyboard Navigation

The slider track is fully keyboard accessible. Focus it and use the keys below.

→ / ↑Increment by one step
← / ↓Decrement by one step
Page UpIncrement by 10% of range
Page DownDecrement by 10% of range
HomeJump to minimum
EndJump to maximum

API Reference

PropTypeDefaultDescription
value number0Current value. Supports $bindable — use bind:value for two-way binding.
min number0Minimum value of the range.
max number100Maximum value of the range.
step number1Increment step. Supports decimals.
label string—Label displayed above the slider track.
hint string—Helper text shown below the slider track.
showValue booleantrueWhether to display the current numeric value next to the label.
disabled booleanfalseDisables all interaction and applies reduced opacity.
animation 'none' | 'smooth' | 'spring' | 'elastic' | 'bounce' | 'snappy''none'Easing animation applied to the fill track and thumb after releasing drag.
onchange (v: number) => void—Callback fired whenever the value changes.