# Slider

Slider with an optional value bubble and tick marks for stepped values. The fill brightens while you drag, and it can give a brief flicker when you push past either end.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add slider
```

## Import

```tsx
import { Slider } from "@/components/ui/slider/slider";
```

## Variants

- `dimmer` — Dimmer: `npx @lumioui/cli add slider-dimmer`
- `glass` — Glass: `npx @lumioui/cli add slider-glass`
- `price` — Price: `npx @lumioui/cli add slider-price`
- `ticks` — Ticks: `npx @lumioui/cli add slider-ticks`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled value. Omit + use defaultValue for uncontrolled. |
| `defaultValue?` | `number` | Uncontrolled initial value. Default min. |
| `onValueChange?` | `(value: number) => void` | — |
| `onSlidingComplete?` | `(value: number) => void` | Fires once when the finger lifts, with the settled value. |
| `min?` | `number` | — |
| `max?` | `number` | — |
| `step?` | `number` | — |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |
| `showTicks?` | `boolean` | Show tick marks for each step. Default false. |
| `glass?` | `boolean` | Glass track + thumb — a frosted lane with a glass disc. |
| `showValue?` | `boolean` | A value bubble that rises over the thumb while it is held and swaps its number in place per step. Default false. |
| `formatValue?` | `(value: number) => string` | Formats the bubble's number. Default `String(value)`. |
| `flickerAtEnds?` | `boolean` | Overdragging past min or max flickers the thumb once into the end it hit, with a warning haptic ("can't"). Default false. |

Source: https://lumioui.com/components/slider