Slider

bun x bosia@latest add slider

Slider yang dibangun di atas pointer event dan ARIA role="slider", dengan mode satu-thumb dan rentang (dua-thumb), orientasi horizontal dan vertikal.

Preview

Props

Penggunaan

<script lang="ts">
	import { Slider } from "$lib/components/ui/slider";
	let value = $state(50);
</script>

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

Rentang

Gunakan type="range" untuk dua thumb. Value-nya berupa tuple [number, number].

<script lang="ts">
	import { Slider } from "$lib/components/ui/slider";
	let range = $state<[number, number]>([20, 80]);
</script>

<Slider type="range" bind:value={range} /><p>From {range[0]} to {range[1]}</p>

Vertikal

<div class="h-40">
	<Slider orientation="vertical" value={40} />
</div>

Step Kustom

<Slider step={10} value={50} />

Nonaktif

<Slider disabled value={60} />

Penggunaan Form

Saat prop name diberikan, elemen <input> tersembunyi dirender untuk pengiriman form native. Mode rentang men-submit dua nilai dengan name[].

<form method="POST">
	<Slider name="volume" value={75} />
	<button type="submit">Save</button>
</form>