Controls
Glass Slider
A slider whose glass thumb stretches with your drag, for one value or a range.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-slidernpx shadcn@4.14.1 add @glassyui-native/glass-sliderPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-sliderWhat this installs7 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-slider itself in registry.json.
Package dependencies
@radix-ui/react-sliderclsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-slider.tsxcomponents/glassyui/lib/merge-refs.tscomponents/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-sliderclsx
Installed files
components/glassyui/glass-slider.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/liquid-motion.tscomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-slidernpx expo install --fixUsage
import { GlassSlider } from "@/components/glassyui/glass-slider";
export function SliderDemo() {
return <GlassSlider aria-label="Volume" defaultValue={[60]} max={100} step={1} />;
}import { useState } from 'react';
import { GlassSlider } from '@/components/glassyui/glass-slider';
export default function SliderExample() {
const [price, setPrice] = useState([20, 80]);
return <GlassSlider accessibilityLabel="Price" onValueChange={setPrice} step={5} value={price} />;
}
Examples
<GlassSlider
aria-label="Price"
defaultValue={[20, 80]}
thumbLabels={["Minimum price", "Maximum price"]}
/>API
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassSliderForward-ref Radix Slider root with a track, range, and one thumb per value.
GlassSliderPropsRadix Slider root props plus thumbLabels.
thumbLabelsAccessible names for the thumbs in value order. A single thumb uses the slider aria-label.
value / defaultValueControlled or uncontrolled values; the array length sets the thumb count.
onValueChange / onValueCommitCalled 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.