Slider - HapplyUI

A slider component with single and range modes, primary and neutral color variants.

Installation

bunx @happlyui/cli@latest add slider

Dependencies

npm packages

@radix-ui/react-slider

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
happly-ui-utils

Usage

import * as Slider from "@/components/ui/slider"

<Slider.Root defaultValue={[33]} max={100} step={1}>
  <Slider.Thumb />
</Slider.Root>

Examples

Demo

Basic single-value slider.

<Slider.Root defaultValue={[33]} max={100} step={1}>
  <Slider.Thumb />
</Slider.Root>

Variants

Primary and neutral color variants.

Primary

Neutral

<Slider.Root variant="primary" defaultValue={[50]} max={100}>
  <Slider.Thumb />
</Slider.Root>
<Slider.Root variant="neutral" defaultValue={[50]} max={100}>
  <Slider.Thumb />
</Slider.Root>

Range

Dual-thumb range slider.

<Slider.Root defaultValue={[300, 450]} min={0} max={600}>
  <Slider.Thumb />
  <Slider.Thumb />
</Slider.Root>

Range slider with tooltip values on each thumb.

<Slider.Root defaultValue={[300, 450]} min={0} max={600} onValueChange={setValue}>
  <Tooltip.Root open>
    <Tooltip.Trigger asChild>
      <Slider.Thumb />
    </Tooltip.Trigger>
    <Tooltip.Content size="xsmall" side="top">
      {formatCurrency(value[0])}
    </Tooltip.Content>
  </Tooltip.Root>
</Slider.Root>

With Form Field

Slider composed with FormField for consistent label and hint.

Volume

Adjust the playback volume.

<FormField.Root label="Volume" hint="Adjust the playback volume.">
  <Slider.Root defaultValue={[50]} max={100} step={1}>
    <Slider.Thumb />
  </Slider.Root>
</FormField.Root>

API Reference

Slider.Root

The slider container. Extends Radix Slider.Root props.

Prop	Type	Default	Description
`variant`	`'primary' \| 'neutral'`	`'primary'`	Color variant for the range fill and thumb
`defaultValue`	`number[]`	-	Default value(s) for uncontrolled usage
`value`	`number[]`	-	Controlled value(s)
`onValueChange`	`(value: number[]) => void`	-	Callback when the value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment

Slider.Thumb

A draggable thumb. Add one per value in the array.

Prop	Type	Default	Description