Liquid Slider

Installation

npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-slider.json

Usage

import { LiquidSlider } from "@/components/ui/liquid-slider"

export function Volume() {
  return <LiquidSlider defaultValue={[64]} aria-label="Volume" />
}

The visible rail is the real Radix Range. Inside the tracker, a full DOM track clone with a live Range segment is aligned beneath the lens and bent by the displacement map, following Aave's refractionTarget={<TrackFill progress={progress} />} architecture. It is updated synchronously from Radix without independent React progress state or a second position animation, so the fill remains continuous through the glass at 0%, 100%, and during drag.

Tracker size

Use a preset or tune the tracker geometry in pixels. Custom geometry keeps the same Switch-aligned material, motion, live progress refraction, and endpoint calculations.

<LiquidSlider size="small" defaultValue={[36]} />
<LiquidSlider size="regular" defaultValue={[52]} />
<LiquidSlider size="large" defaultValue={[68]} />

<LiquidSlider
  trackerSize={{
    width: 58,
    height: 34,
    trackHeight: 9,
  }}
  defaultValue={[44]}
/>