Glass Slider for React

Preview

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Slider

pnpm dlx shadcn@4.14.1 add @glassyui/glass-slider

What this installs7 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-slider itself in registry.json.

Package dependencies

@radix-ui/react-slider
clsx

Registry dependencies

@glassyui/glass-provider

File targets

components/glassyui/glass-slider.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/liquid-motion.ts

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

@radix-ui/react-slider
clsx

Installed files

components/glassyui/glass-slider.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/liquid-motion.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassSlider } from "@/components/glassyui/glass-slider";

export function SliderDemo() {
  return <GlassSlider aria-label="Volume" defaultValue={[60]} max={100} step={1} />;
}

Examples

Range

<GlassSlider
  aria-label="Price"
  defaultValue={[20, 80]}
  thumbLabels={["Minimum price", "Maximum price"]}
/>

API

GlassSlider

Forward-ref Radix Slider root with a track, range, and one thumb per value.

GlassSliderProps

Radix Slider root props plus thumbLabels.

thumbLabels

Accessible names for the thumbs in value order. A single thumb uses the slider aria-label.

value / defaultValue

Controlled or uncontrolled values; the array length sets the thumb count.

onValueChange / onValueCommit

Called while dragging and when a drag ends.

Notes

Accessibility

Each thumb is a separate slider. Range thumbs default to minimum and maximum names built from the slider label.

Motion

The thumb swells into clear glass while dragged and stretches along the track with your speed. Reduced motion keeps its shape.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.