shadcn.io is not affiliated with official shadcn/ui

Shadcn Circular Slider for React Radix UI

A progress-ring dial for selecting an angle.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

45°

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/circular-slider.json

Anatomy

CircularSlider
├── CircularSliderLabel
├── CircularSliderThumb
├── CircularSliderValue
├── CircularSliderContext
├── CircularSliderTrack
└── CircularSliderMarker
    └── CircularSliderMarkerGroup

Usage

import {
  CircularSlider,
  CircularSliderValue,
} from "@/components/ui/circular-slider";

<CircularSlider aria-label="Angle" defaultValue={45}>
  <CircularSliderValue suffix="°" />
</CircularSlider>

Accessibility

Key	Description
`ArrowLeft`	Decrease the value.
`ArrowUp`	Decrease the value.
`ArrowRight`	Increase the value.
`ArrowDown`	Increase the value.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Context

PreviewCode

Controlled

PreviewCode

Custom Markers

PreviewCode

Disabled

PreviewCode

Invalid

PreviewCode

Read Only

PreviewCode

Root Provider

PreviewCode

Size

PreviewCode

Step

PreviewCode

Thickness

PreviewCode

With Label

PreviewCode

With Markers

PreviewCode

With Value

PreviewCode

API Reference

CircularSlider

div

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

asChild?boolean

className?string

AttributeType

data-slot"circular-slider"

data-scope"angle-slider"

data-part"root"

data-disabled?string

data-invalid?string

data-readonly?string

CSS variableType

--anglestring

--valuestring

CircularSliderLabel

label

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

asChild?boolean

className?string

AttributeType

data-slot"circular-slider-label"

data-scope"angle-slider"

data-part"label"

data-disabled?string

data-invalid?string

data-readonly?string

CircularSliderThumb

div

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

asChild?boolean

className?string

AttributeType

data-slot"circular-slider-thumb"

data-scope"angle-slider"

data-part"thumb"

aria-labelstring

aria-labelledbystring

aria-valuemaxstring

aria-valueminstring

aria-valuenowstring

data-disabled?string

data-invalid?string

data-readonly?string

role"slider"

CSS variableType

--sizestring

CircularSliderValue

div

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

prefix?ReactNode

readOnly?boolean

step?number

suffix?ReactNode

asChild?boolean

className?string

AttributeType

data-slot"circular-slider-value"

data-scope"angle-slider"

data-part"value-text"

CircularSliderMarkerGroup

div

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

asChild?boolean

className?string

AttributeType

data-slot"circular-slider-marker-group"

data-scope"angle-slider"

data-part"marker-group"

CircularSliderMarker

div

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

asChild?boolean

className?string

AttributeType

data-slot"circular-slider-marker"

data-scope"angle-slider"

data-part"marker"

data-disabled?string

data-statestring

data-valuestring

CSS variableType

--marker-display-valuestring

--marker-heightstring

--marker-offsetstring

--marker-valuestring

--marker-widthstring

CircularSliderRootProvider

div

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

idstring

dir?"ltr" | "rtl"

disabled?boolean

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

asChild?boolean

className?string

AttributeType

data-slot"circular-slider"

data-scope"angle-slider"

data-part"root"

data-disabled?string

data-invalid?string

data-readonly?string

CSS variableType

--anglestring

--valuestring

Installation

Anatomy

Usage

Accessibility

Demos

Context

Controlled

Custom Markers

Disabled

Invalid

Read Only

Root Provider

Size

Step

Thickness

With Label

With Markers

With Value

API Reference

CircularSlider

CircularSliderLabel

CircularSliderThumb

CircularSliderValue

CircularSliderMarkerGroup

CircularSliderMarker

CircularSliderRootProvider

useCircularSlider

CircularSliderContext