Slider

Preview

Installation

pnpm add fancy-ui-svelte

import { Slider } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { Slider } from 'fancy-ui-svelte';
</script>

<Slider />

Examples

Basic Usage

With Bounds

Shows the min/max end labels.

svelte

<script lang="ts">
	import { Slider } from "$lib/fancy-ui/slider";

	let brightness = $state(40);
</script>

<div class="w-72">
	<Slider bind:value={brightness} min={0} max={100} label="Brightness" showValue showBounds />
</div>

Steps

A stepped 0–5 rating scale.

svelte

<script lang="ts">
	import { Slider } from "$lib/fancy-ui/slider";

	let rating = $state(3);
</script>

<div class="w-72">
	<Slider bind:value={rating} min={0} max={5} step={1} label="Rating" showValue showBounds />
</div>

Props

Prop	Type	Default	Description
`value`	number	`0`	Current value; bindable
`onValueChange`	(value: number) => void	-	Called with the new value on every input event
`min`	number	`0`	Lower bound
`max`	number	`100`	Upper bound
`step`	number	`1`	Increment size, including fractional steps
`disabled`	boolean	`false`	Blocks dragging and keyboard interaction. Overridden by a surrounding FormField
`id`	string	-	Element id. Overridden by a surrounding FormField's own controlId
`name`	string	-	Native name, read on form submission
`label`	string	-	Accessible name — for a control with no visible Label next to it
`showValue`	boolean	`false`	Shows the current value in a bubble that tracks the thumb
`showBounds`	boolean	`false`	Shows min and max as end labels below the track
`class`	string	-	Additional CSS classes, applied to the outer wrapper
`ref`	HTMLInputElement \| null	`null`	Reference to the underlying input type=range