Slider

A glass knob that turns to liquid as you drag it.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/slider

Needs the @liquikit registry in your components.json. Set it up once.

import { Slider } from "@/components/liquikit/slider"

<Slider defaultValue={40} width={280} aria-label="Volume" />

The slider draws at a fixed width in pixels, because the lens is traced for that size. Measure the container if you need it to fill one.

64%

thumbHeight and trackHeight resize the knob and the track.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`value`	`number` The current value, when you control it.	—
`defaultValue`	`number` The value it starts with, when it manages its own state.	—
`onValueChange`	`(value: number, eventDetails: BaseSlider.Root.ChangeEventDetails) => void` Called with the new value when the user changes it.	—
`onValueCommitted`	`(value: number, eventDetails: BaseSlider.Root.CommitEventDetails) => void` Called once the user lets go of the knob.	—
`width`	`number` Width of the track, in pixels.	240
`trackHeight`	`number` Height of the track, in pixels.	—
`thumbHeight`	`number` Height of the glass knob, in pixels.	22
`thumbWidth`	`number` Width of the knob. Defaults to twice its height.	—
`aria-label`	`string` An accessible name, for controls without a visible label.	—

Also takes every prop of Base UI's slider, plus className and style.