Circular Slider

The circular slider selects a numeric value by dragging a thumb around a ring. Use it for radial inputs like timers, volume or brightness knobs, temperature dials, and color or angle pickers.

Preview

Installation

npx shadcn@latest add @cubby-ui/circular-slider

Usage

import {
  CircularSliderRoot,
  CircularSliderTrack,
  CircularSliderIndicator,
  CircularSliderThumb,
} from "@/components/ui/cubby-ui/circular-slider";

<CircularSliderRoot>
  <CircularSliderTrack />
  <CircularSliderIndicator />
  <CircularSliderThumb />
</CircularSliderRoot>

Composition

CircularSliderRoot
├── CircularSliderTrack
├── CircularSliderIndicator
├── CircularSliderThumb
├── CircularSliderValue
└── CircularSliderMarkers

Examples

With Value Display

Add CircularSliderValue to render the current value in the center.

Sizes

Set size on the root and strokeWidth or thumb size on the parts to scale each dimension independently.

Variants

Use variant to switch between a ring and a filled circle with a radial indicator.

Format Value

Pass formatValue to CircularSliderValue to append units or symbols to the displayed value.

With Markers

Add CircularSliderMarkers to draw evenly-spaced tick marks around the circle.

Direction

Use direction to set which way the value progresses around the circle.

Non-Continuous Mode

Set continuous={false} to show a gap at the bottom and stop the value from wrapping between max and min.

Custom Start Angle

Use startAngle to set where the value scale begins on the circle.

Accessibility

The slider renders a visually hidden native <input type="range"> that owns focus, value semantics, and form integration, so screen readers announce it as a slider. Set aria-label (or aria-labelledby) on CircularSliderRoot to name it, and pass aria-valuetext to announce a formatted value instead of the raw number.

Keyboard

When the slider is focused, the native range input handles arrow keys, Home, and End. Page Up and Page Down move by largeStep.

API Reference

The Circular Slider is a custom component built with SVG and follows the established patterns from Base UI components (using useRender and mergeProps).

Props

CircularSliderRoot

The root container that manages state and provides context to child components.

Form & Accessibility

These props are forwarded to an underlying native <input type="range"> for form integration and screen reader support.

CircularSliderTrack

The background circle or arc that shows the full range.

CircularSliderIndicator

The arc that shows the selected value range from min to current value.

CircularSliderThumb

The draggable handle on the circle that controls the value.

CircularSliderValue

Text display of the current value, typically shown in the center of the circle.

CircularSliderMarkers

Visual tick marks around the circle for better value indication.