Circular Slider

Circular slider for selecting values.

45 °

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/circular-slider.json


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


<CircularSlider defaultValue={45} />

More than: 180

❌

Use the size prop to change the slider dimensions.

Use the thickness prop to change the progress ring thickness.

Use markers to display clock-style tick marks.

Use markersAtSteps with step to align markers with step positions.

Use CircularSliderValue to show the current value. The prefix and suffix props customize the display.

90 °

Pass a number[] to markers for custom angles.

Root component. Manages angle selection and value.

Prop	Type	Default
`value`	`number`	-
`defaultValue`	`number`	`0`
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`step`	`number`	`1`
`disabled`	`boolean`	-
`size`	`number`	`120`
`thickness`	`number`	`6`
`markers`	`boolean \| number[]`	-
`markersAtSteps`	`boolean`	`false`
`className`	`string`	-

Shows the current angle value (degrees or custom format).

For a complete list of props, see the Ark UI documentation.

On This Page