Glin UI
Radix UIBase UI
Primitive / Atombeta

Slider

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

Edit on GitHub

Filter listings

76 stays match your budget.

$40 to $220
65%

Installation

Install from
pnpm dlx @glinui/cli@latest add slider

Prefer the package?

Usage

Variants

import { Slider } from "@glinui/ui"



export function Demo() {
  return (
    <div className="space-y-4">
      <Slider variant="glinr" defaultValue={[20]} aria-label="glinr slider" />
      <Slider variant="solid" defaultValue={[32]} aria-label="solid slider" />
      <Slider variant="plain" defaultValue={[44]} aria-label="plain slider" />
      <Slider variant="soft" defaultValue={[56]} aria-label="soft slider" />
      <Slider variant="outline" defaultValue={[68]} aria-label="outline slider" />
      <Slider variant="ghost" defaultValue={[80]} aria-label="ghost slider" />
    </div>
  )
}

Sizes

import { Slider } from "@glinui/ui"



export function Demo() {
  return (
    <div className="space-y-4">
      <Slider size="sm" defaultValue={[24]} aria-label="Small slider" />
      <Slider size="md" defaultValue={[52]} aria-label="Medium slider" />
      <Slider size="lg" defaultValue={[78]} aria-label="Large slider" />
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Slider } from "@glinui/ui"



export function Demo() {
  return (
    <Slider variant="glass" defaultValue={[40]} aria-label="Glass slider" />
  )
}

Variants

import { Slider } from "@glinui/ui"

export function SliderVariantDemo() {
  return (
    <div className="space-y-4">
      <Slider defaultValue={[20]} aria-label="Default slider" />
      <Slider variant="glass" defaultValue={[40]} aria-label="Glass slider" />
      <Slider variant="outline" defaultValue={[58]} aria-label="Outline slider" />
      <Slider variant="ghost" defaultValue={[72]} aria-label="Ghost slider" />
      <Slider variant="liquid" defaultValue={[86]} aria-label="Liquid slider" />
    </div>
  )
}

Accessibility

  • Built on Radix Slider with full ARIA support.
  • Supports single-value and range sliders (multiple thumbs).
  • Provide `aria-label` for screen readers.
  • Thumb includes visible focus ring.
  • Provide `aria-label` for each slider input.

Keyboard Interactions

KeyAction
Arrow Left / RightDecrease / increase value by one step.
HomeSet to minimum value.
EndSet 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

PropTypeRequiredDefaultDescription
variantControlVariantPropNoambient (glinr)Look. Omit to follow the ambient design style: glinr is an inset track with an accent range and a raised key thumb. Glass is opt-in.
size"sm" | "md" | "lg"NomdTrack and thumb size scale.
defaultValuenumber[]--Initial value(s).
valuenumber[]--Controlled value(s).
onValueChange(value: number[]) => void--Change handler for controlled sliders.
maxnumber-100Maximum value.
stepnumber-1Step increment.
disabledboolean-falseDisables 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

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

SliderProps

SliderProps

PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg"No"md"Variant option from sliderVariants.
variantControlVariantPropNo-Surface look. Omit to follow the ambient design style (glinr = inset track, accent range, raised key thumb). Also: solid, plain, soft, outline, ghost, glass (opt-in), liquid.