Sivir UI
Studio 64

Slider

A range slider with keyboard and drag support.

Volume 64

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add slider

Usage

Import Slider and bind its value:

import { Slider } from '$lib/sivir/components/slider';

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

Examples

Slider with different configurations.

Basic

With step

Disabled

Anatomy

Slider - Selects a numeric value from a range.