Primitive / Atombeta

Slider

Range input control built on Radix slider primitive with glass thumb/track styling.

@glinui/uiComponent: slider

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add slider

Usage$

TSX

1import { Slider } from "@glinui/ui"
2
3export function SliderBasicDemo() {
4return <Slider defaultValue={[35]} max={100} step={1} aria-label="Volume" />
5}

Examples$

Variants$

TSX

1import { Slider } from "@glinui/ui"
2
3export function SliderVariantDemo() {
4return (
5  <div className="space-y-4">
6    <Slider defaultValue={[20]} aria-label="Default slider" />
7    <Slider variant="glass" defaultValue={[40]} aria-label="Glass slider" />
8    <Slider variant="outline" defaultValue={[58]} aria-label="Outline slider" />
9    <Slider variant="ghost" defaultValue={[72]} aria-label="Ghost slider" />
10    <Slider variant="liquid" defaultValue={[86]} aria-label="Liquid slider" />
11  </div>
12)
13}

Sizes$

TSX

1import { Slider } from "@glinui/ui"
2
3export function SliderSizeDemo() {
4return (
5  <div className="space-y-4">
6    <Slider size="sm" defaultValue={[24]} aria-label="Small slider" />
7    <Slider size="md" defaultValue={[52]} aria-label="Medium slider" />
8    <Slider size="lg" defaultValue={[78]} aria-label="Large slider" />
9  </div>
10)
11}

Range$

TSX

1import { Slider } from "@glinui/ui"
2
3export function SliderRangeDemo() {
4return <Slider defaultValue={[24, 78]} max={100} step={1} aria-label="Engagement range" />
5}

Accessibility$

Built on Radix Slider with keyboard navigation support.
Thumb includes visible focus ring.
Provide aria-label for each slider input.

Reduced Motion$

Thumb and track transitions are disabled for users with reduced-motion preferences.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from sliderVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost" \| "liquid"`	No	`"default"`	Variant option from sliderVariants.

Source$

TSX

1import { Slider } from "@glinui/ui"

packages/ui/src/components/slider.tsx

packages/ui/src/tests/slider.test.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/slider.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

SliderProps

`SliderProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from sliderVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost" \| "liquid"`	No	`"default"`	Variant option from sliderVariants.