Slider
MD3 Expressive slider.
Try it
Volume
Knobs
<script> import { Slider } from 'omaris';</script><Slider value={40} label="Volume" />Walkthrough
1. Basic
wave ripples the fill while you drag — for a value set by feel, like volume. A plain track for a plainer setting.
Volume 64
<script lang="ts"> import { Slider } from 'omaris'; let volume = $state(64);</script><div class="w-full max-w-md"> <Slider bind:value={volume} wave label="Volume" showValue /></div>2. Steps and ticks
A step snaps the handle; ticks draws where it will land.
Rating 3
Zoom 100%
<script lang="ts"> import { Slider } from 'omaris'; let rating = $state(3); let zoom = $state(100);</script><div class="flex w-full max-w-md flex-col gap-8"> <Slider bind:value={rating} min={1} max={5} step={1} ticks label="Rating" showValue /> <Slider bind:value={zoom} min={50} max={200} step={25} label="Zoom" showValue format={(v) => `${v}%`} /></div>3. Range
Two handles on one track — a price range, a time window.
Price $20 – $80
Handles cannot cross.
<script lang="ts"> import { RangeSlider } from 'omaris'; let price = $state<[number, number]>([20, 80]);</script><div class="w-full max-w-md"> <RangeSlider bind:value={price} label="Price" showValue format={(v) => `$${v}`} supportingText="Handles cannot cross." /></div>4. Elastic
elastic lets the ends give: drag past either end and the whole track stretches after the finger, less and less the further it goes, and springs back with a small bounce when you let go. The value is already at its limit; the stretch is how the track says so without a wall.
Brightness 88
Volume 12
<script lang="ts"> import { Slider } from 'omaris'; let brightness = $state(88); let volume = $state(12);</script><div class="flex w-full max-w-md flex-col gap-6"> <Slider bind:value={brightness} elastic label="Brightness" showValue /> <Slider bind:value={volume} elastic wave size="sm" label="Volume" showValue /></div>5. Sizes and orientation
Three thicknesses, and a vertical track for a mixer or a level.
<script lang="ts"> import { Slider } from 'omaris'; let a = $state(30); let b = $state(55); let c = $state(80); let level = $state(70);</script><div class="flex w-full items-start gap-10"> <div class="flex min-w-0 flex-1 flex-col gap-6"> <Slider bind:value={a} size="sm" ariaLabel="Small" /> <Slider bind:value={b} ariaLabel="Medium" /> <Slider bind:value={c} size="lg" wave="always" ariaLabel="Large, always waving" /> </div> <div class="h-40"> <Slider bind:value={level} orientation="vertical" size="lg" ariaLabel="Level" /> </div></div>6. Overridden
Every part is reachable, so a slider can wear a different accent entirely.
Roast 45°
<script lang="ts"> import { Slider } from 'omaris'; let heat = $state(45);</script><div class="w-full max-w-md"> <Slider bind:value={heat} tone="warning" label="Roast" showValue format={(v) => `${v}°`} classes={{ label: 'uppercase tracking-wide text-xs' }} /></div>