Primitive / Atombeta

Slider

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

@glinui/uiComponent: slider

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add slider

Usage

Basic

TSX

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

Surface Variants

TSX

1import { Slider } from "@glinui/ui"
2
3export function Demo() {
4  return (
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 Demo() {
4  return (
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

24%78%

TSX

1import * as React from "react"
2import { Slider } from "@glinui/ui"
3
4export function Demo() {
5  const [value, setValue] = React.useState([24, 78])
6
7  return (
8    <div className="space-y-3">
9      <Slider value={value} onValueChange={setValue} max={100} step={1} aria-label="Engagement range" />
10      <div className="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-400">
11        <span>{value[0]}%</span>
12        <span>{value[1]}%</span>
13      </div>
14    </div>
15  )
16}

Animated Atmosphere

Decorative blur layers pulse with reduced-motion fallback while slider values stay readable.

Atmosphere62%

TSX

1import * as React from "react"
2import { Badge, Slider } from "@glinui/ui"
3
4export function Demo() {
5  const [value, setValue] = React.useState([62])
6
7  return (
8    <div className="relative overflow-hidden rounded-2xl border border-white/25 bg-[var(--glass-1-surface)] p-4 dark:border-white/10 dark:bg-white/[0.03]">
9      <div className="pointer-events-none absolute -left-6 -top-10 h-24 w-24 rounded-full bg-[var(--color-accent)]/25 blur-2xl motion-safe:animate-pulse" />
10      <div className="pointer-events-none absolute -bottom-10 right-0 h-24 w-24 rounded-full bg-[var(--color-foreground)]/15 blur-3xl motion-safe:animate-pulse" />
11      <div className="relative space-y-3">
12        <div className="flex items-center justify-between text-xs text-neutral-600 dark:text-neutral-300">
13          <span>Atmosphere</span>
14          <Badge variant="glass">{value[0]}%</Badge>
15        </div>
16        <Slider variant="liquid" value={value} onValueChange={setValue} max={100} aria-label="Atmosphere amount" />
17      </div>
18    </div>
19  )
20}

Accessibility

Built on Radix Slider with full ARIA support.
Supports single-value and range sliders (multiple thumbs).
Provide `aria-label` for screen readers.

Keyboard Interactions

Key	Action
`Arrow Left / Right`	Decrease / increase value by one step.
`Home`	Set to minimum value.
`End`	Set to maximum value.

ARIA Attributes

`role="slider"`
`aria-valuenow`
`aria-valuemin`
`aria-valuemax`
`aria-orientation`

Reduced Motion

Thumb and track transitions respect `prefers-reduced-motion`.

Affected properties

transformbox-shadowopacity

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "outline" \| "ghost" \| "liquid"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Track and thumb size scale.
`defaultValue`	`number[]`	-	`-`	Initial value(s).
`value`	`number[]`	-	`-`	Controlled value(s).
`onValueChange`	`(value: number[]) => void`	-	`-`	Change handler for controlled sliders.
`max`	`number`	-	`100`	Maximum value.
`step`	`number`	-	`1`	Step increment.
`disabled`	`boolean`	-	`false`	Disables interaction.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Slider } from "@glinui/ui"

Source Files

slider.tsx

slider.test.tsxtest

Dependencies

@glinui/ui

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.