Circular Slider

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>

Examples

With Value Display

Display the current value in the center of the slider.

Sizes

Configure the slider size and independently control track, indicator, and thumb dimensions.

Variants

Choose between a classic ring style or a filled circle with a radial indicator.

Format Value

Customize the displayed value with custom formatting like units or symbols.

With Markers

Add visual markers around the circle for better value indication.

Direction

Control the direction of value progression around the circle.

Non-Continuous Mode

Disable continuous mode to show a visual gap and prevent wrapping from max to min.

Custom Start Angle

Configure where the slider starts on the circle.

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).

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.