# Slider

> Restyled native range input with a purple-to-cyan gradient fill that tracks the current value and a glowing thumb.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Forms
- Tags: slider, range, form, input
- Docs: https://fancy-ui.rama.app/docs/components/slider
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/slider

## Import

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

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Slider } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## 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 |
| `sound` | `boolean` | `false` | Plays the tick cue on a committed value change, once the user has enabled sound |

## Examples

### Basic Usage

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

	let volume = $state(60);
</script>

<div class="w-72">
	<Slider sound bind:value={volume} label="Volume" showValue />
</div>
```

### With Bounds

Shows the min/max end labels.

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

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

<div class="w-72">
	<Slider sound 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 "fancy-ui-svelte";

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

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