Components
Liquid Slider
A Radix Slider with synchronized fill, spring deformation, and a refractive tracker.
Installation
npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-slider.jsonUsage
import { LiquidSlider } from "@/components/ui/liquid-slider"
export function Volume() {
return <LiquidSlider defaultValue={[64]} aria-label="Volume" />
}The fill and tracker derive from the same Radix value, preventing visual lag. Endpoint geometry keeps the tracker inside the rail at both 0% and 100%.