# Slider

A draggable control for selecting values from a continuous range.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

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

<Slider value={50} />

```

## Anatomy

- `Slider`
- `SliderRange`
- `SliderThumb`
- `SliderThumbLabel`
- `SliderTick`
- `SliderTickLabel`

## API Reference

### Slider

A draggable control for selecting values from a continuous range.

**Signatures**

- `{ type?: "single"; value?: number; onValueChange?: OnChangeFn<number>; onValueCommit?: OnChangeFn<number> }`
- `{ type: "multiple"; value?: number[]; onValueChange?: OnChangeFn<number[]>; onValueCommit?: OnChangeFn<number[]> }`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `"single" \| "multiple"` | `"single"` | Behavior, selection, or HTML type passed to the underlying control. |
| `bind:value` | `number \| number[]` | `""` | Current value for the component. Bind with `bind:value` when supported. |
| `min` | `number` | `0` | Minimum value for the control. |
| `max` | `number` | `100` | Maximum value for the control. |
| `step` | `number \| number[]` | `1` | Increment used when changing slider values. |

**Composition and refs**

- `children: Snippet<[SliderRootSnippetProps]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Slider.Root](https://bits-ui.com/docs/components/slider#root).

### SliderRange

Renders the filled range between slider values.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Slider.Range](https://bits-ui.com/docs/components/slider#range).

### SliderThumb

Renders the draggable or moving indicator.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Slider.Thumb](https://bits-ui.com/docs/components/slider#thumb).

### SliderThumbLabel

Labels the parent component or a grouped section.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Slider.ThumbLabel](https://bits-ui.com/docs/components/slider#thumb-label).

### SliderTick

Renders one slider tick mark.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Slider.Tick](https://bits-ui.com/docs/components/slider#tick).

### SliderTickLabel

Labels the parent component or a grouped section.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Slider.TickLabel](https://bits-ui.com/docs/components/slider#tick-label).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Selection & Input |
| Particles | 23 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/slider.json` for the complete local file and dependency closure.
- Slider is stable in the current source catalog.