docs/components/circular-slider
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Circular slider for selecting values.
PreviewCode
45 °
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/circular-slider
import { CircularSlider } from "@/components/ui/circular-slider";
<CircularSlider defaultValue={45} />
PreviewCode
More than: 180
❌
PreviewCode
Use the size prop to change the slider dimensions.
PreviewCode
Use the thickness prop to change the progress ring thickness.
PreviewCode
Use markers to display clock-style tick marks.
PreviewCode
Use markersAtSteps with step to align markers with step positions.
PreviewCode
Use CircularSliderValue to show the current value. The prefix and suffix props customize the display.
PreviewCode
90 °
Pass a number[] to markers for custom angles.
PreviewCode
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).
| Prop | Type | Default |
|---|---|---|
prefix | `React.ReactNode | string` |
suffix | `React.ReactNode | string` |
className | string | - |
For a complete list of props, see the Ark UI documentation.
[
Previous page
Circular Progress ](/docs/components/circular-progress)[
Next page
Clipboard ](/docs/components/clipboard)
On This Page
InstallationUsageControlledStatesDisabledExamplesSizeThicknessWith markersWith stepShow valueCustom markersAPI ReferenceCircularSliderCircularSliderValue