# antuikit / Slider

> Slider, with the value tooltip drawn as the kit's small Tooltip, an `inset` look with the handle inside a tall rail in two sizes, a `color` for the fill, and a `shape` for its corners.

Docs: https://antuikit.com/docs/components/slider

## Install

npx antuikit@latest init
npx antuikit@latest add slider

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/slider/basic.md): A `Slider` picks one number between `min` and `max`, 0 to 100 by default.
- [Range](https://ui.antuikit.com/embed/slider/range.md): Set `range` to pick a start and an end with two handles, and get a `[start, end]` array back.
- [Draggable track](https://ui.antuikit.com/embed/slider/draggable-track.md): Set `range={{ draggableTrack: true }}` to let the reader drag the filled span between the two handles as one piece.
- [Add and remove handles](https://ui.antuikit.com/embed/slider/editable-range.md): Set `range={{ editable: true }}` to add a handle by clicking the rail and remove one by dragging it off, within `minCount` and `maxCount`.
- [Marks](https://ui.antuikit.com/embed/slider/marks.md): Pass `marks` to label points on the rail, and set `step={null}` so the handle snaps to those points only.
- [Marks without a fill](https://ui.antuikit.com/embed/slider/included.md): Set `included={false}` to drop the filled track, so the handle points at one value instead of a span from the start.
- [Step dots](https://ui.antuikit.com/embed/slider/dots.md): Set `step` with `dots` to draw a dot at every step, like one every 10 on a 0 to 100 rail.
- [Inset](https://ui.antuikit.com/embed/slider/restyle-rail.md): Set `inset` to draw the handle inside a tall rail, here as a five-step scale and a range.
- [Inset shapes](https://ui.antuikit.com/embed/slider/restyle-rail-rounded.md): Set `shape` on an `inset` Slider to `square` or `squircle` for the rail, the fill and the handle, or leave it as the pill.
- [Inset sizes](https://ui.antuikit.com/embed/slider/inset-size.md): Set `size="small"` on an `inset` Slider for a shorter rail, here with each `shape`.
- [Colors](https://ui.antuikit.com/embed/slider/inset-color.md): Set `color="primary"` to paint the fill and handle in the app's primary, on a thin rail or an `inset` one.
- [With InputNumber](https://ui.antuikit.com/embed/slider/with-input-number.md): Pair a `Slider` with an `InputNumber` on the same state so the reader can drag or type, for whole numbers or decimals.
- [Tooltip format](https://ui.antuikit.com/embed/slider/tooltip.md): Pass `tooltip.formatter` to change the value shown on the handle, like adding °C, and `tooltip.color` to tint the bubble.
- [Tooltip always shown](https://ui.antuikit.com/embed/slider/tooltip-open.md): Set `tooltip={{ open: true }}` to keep the value visible above the handle without hovering or dragging.
- [Without a tooltip](https://ui.antuikit.com/embed/slider/tooltip-hidden.md): Set `tooltip={{ formatter: null }}` to hide the value tooltip, for a slider whose value is shown somewhere else.
- [Vertical](https://ui.antuikit.com/embed/slider/vertical.md): Set `vertical` to stand the slider upright, with a single value, a range, marks or `inset`, inside a parent that has a height.
- [Reverse](https://ui.antuikit.com/embed/slider/reverse.md): Set `reverse` to put the minimum at the right end, or at the top of a vertical slider.
- [Change events](https://ui.antuikit.com/embed/slider/event.md): `onChange` fires on every move while dragging, and `onChangeComplete` fires once on release, which is when to save.
- [Locked handles](https://ui.antuikit.com/embed/slider/disabled-handles.md): Pass `disabled` an array with one entry per handle to lock some handles while the others move around them.
- [In a form](https://ui.antuikit.com/embed/slider/in-form.md): Put a `Slider` in a `Form.Item` to submit its value with the form, here with emoji `marks` at 0, 5 and 10.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/slider`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Slider` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.