Slider takes the same props as Ant Design's, and the file is yours once it is installed. It adds inset, shape, size and color, marked antuikit in the API table. inset draws the slider as a tall rail, and size only changes that rail. The value tooltip is the kit's own small Tooltip.
The tooltip renders in a portal, so a selector on the slider does not reach it. Style it with tooltip.classNames.
Install
npx antuikit@latest init
npx antuikit@latest add slider
The first command sets up AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/slider, not from antd. The path points at the file in your project.
import { Slider } from "@/components/ui/slider"
The axes
Slider has no enumerated props. You set it up with values: min, max, step, marks and range. It has no icons, so it looks the same with any icon pack.
range changes the type of the value: a number without it, an array with it. TypeScript narrows value and onChange for you.
The booleans, with their defaults. Four are on already, so the edit is usually turning one off.
keyboard (on) moves the handle with the arrow, Page, Home and End keys. Off, the handle can still be focused but does nothing, so disable the slider instead.
allowCross (on) lets two handles pass each other. Turn it off for a “from” and “to” pair.
included (on) fills the rail up to the handle, for an amount. Turn it off for a point on a scale.
track (on) shows the filled band. Off keeps the rail, the handles and the marks.
dots (off) draws a dot at every step and mark. It does nothing while step is null, and on 0 to 100 with a step of 1 it draws 101 dots.
vertical (off) stands the slider upright. Give its parent a height, or it collapses.
reverse (off) moves the minimum to the other end, and works with vertical. The slider already flips in a right-to-left layout, so do not set it there.
autoFocus (off) focuses the first handle on mount.
ariaRequired sets aria-required on each handle, or on some of them with an array.
Slots
marks is the one prop that takes nodes. Two more props change what is drawn.
marks maps values to labels, and a label can be any node. The object form, { style, label }, colors one mark: use a theme variable such as var(--ant-color-error), not a hex, so it follows dark mode. With step set to null, marks are the only values the handle can reach.
tooltip takes open, placement, formatter, getPopupContainer and autoAdjustOverflow. A formatter of null hides it. Set getPopupContainer when the slider is inside a scrolling panel.
handleRender and activeHandleRender wrap the handle. Use them last, and keep the role and aria-value* attributes on whatever you return.
Events
onChange fires on every move while dragging, and on every key press.
onChangeComplete fires once, on release. Save here.
onFocus and onBlur fire as a handle gains and loses focus.
Styling
classNames and styles take these keys. Use them before reaching for a selector.
1
<Slider
2
classNames={{
3
root: "…",
4
tracks: "…",
5
track: "…",
6
rail: "…",
7
handle: "…",
8
}}
9
/>
A Tailwind class on one of these keys wins without !important. To change a component token, set it in the theme, not as a CSS variable on the root.
API Reference
Slider
Slider's props. Rows marked antuikit in the Version column are added by the kit.