shadcn.io is not affiliated with official shadcn/ui

Shadcn Angle Slider for React Radix UI

A control for selecting an angle in a circular range.

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

PreviewCode

Rotation

0deg

Installation

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

Anatomy

AngleSlider
├── AngleSliderLabel
├── AngleSliderThumb
├── AngleSliderValueText
├── AngleSliderControl
├── AngleSliderTrack
└── AngleSliderMarker
    └── AngleSliderMarkerGroup

Usage

import {
  AngleSlider,
  AngleSliderControl,
  AngleSliderHiddenInput,
  AngleSliderLabel,
  AngleSliderMarker,
  AngleSliderMarkerGroup,
  AngleSliderThumb,
  AngleSliderValueText,
} from "@/components/ui/angle-slider";

const MARKERS = [0, 45, 90, 135, 180, 225, 270, 315];

const Example = () => (
  <AngleSlider>
    <AngleSliderLabel>Rotation</AngleSliderLabel>
    <AngleSliderControl>
      <AngleSliderMarkerGroup>
        {MARKERS.map((value) => (
          <AngleSliderMarker key={value} value={value} />
        ))}
      </AngleSliderMarkerGroup>
      <AngleSliderThumb />
    </AngleSliderControl>
    <AngleSliderValueText />
    <AngleSliderHiddenInput />
  </AngleSlider>
);

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

Disabled

PreviewCode

Root Provider

PreviewCode

Step

PreviewCode

API Reference

AngleSlider

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"angle-slider"

data-scope"angle-slider"

data-part"root"

data-disabled?string

data-invalid?string

data-readonly?string

CSS variableType

--anglestring

--valuestring

AngleSliderLabel

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"angle-slider-label"

data-scope"angle-slider"

data-part"label"

data-disabled?string

data-invalid?string

data-readonly?string

AngleSliderThumb

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"angle-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

--thumb-widthstring

AngleSliderValueText

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"angle-slider-value-text"

data-scope"angle-slider"

data-part"value-text"

AngleSliderControl

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"angle-slider-control"

data-scope"angle-slider"

data-part"control"

data-disabled?string

data-invalid?string

data-readonly?string

role"presentation"

CSS variableType

--sizestring

--track-widthstring

AngleSliderMarkerGroup

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"angle-slider-marker-group"

data-scope"angle-slider"

data-part"marker-group"

AngleSliderMarker

div

PropType

valuenumber

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"angle-slider-marker"

data-scope"angle-slider"

data-part"marker"

data-disabled?string

data-statestring

data-valuestring

CSS variableType

--marker-display-valuestring

--marker-valuestring

AngleSliderHiddenInput

input

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

AttributeType

data-slot"angle-slider-hidden-input"

data-scope"angle-slider"

data-part"hidden-input"

AngleSliderRootProvider

div

PropType

valueUseAngleSliderReturn

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"angle-slider"

data-scope"angle-slider"

data-part"root"

data-disabled?string

data-invalid?string

data-readonly?string

CSS variableType

--anglestring

--valuestring

useAngleSlider

PropType

value?number

defaultValue?number

onValueChange?(details: ValueChangeDetails) → void

disabled?boolean

id?string

ids?object

invalid?boolean

name?string

onValueChangeEnd?(details: ValueChangeDetails) → void

readOnly?boolean

step?number

AngleSliderContext

PropType

draggingboolean

setValue(value: number) → void

valuenumber

valueAsDegreestring