Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
45 °
Installation#
pnpm dlx shadcn@latest add @shark/circular-slider
Usage#
import { CircularSlider } from "@/components/ui/circular-slider";
<CircularSlider defaultValue={45} />
Controlled#
More than: 180
❌
States#
Disabled#
Examples#
Size#
Use the size prop to change the slider dimensions.
Thickness#
Use the thickness prop to change the progress ring thickness.
With markers#
Use markers to display clock-style tick marks.
With step#
Use markersAtSteps with step to align markers with step positions.
Show value#
Use CircularSliderValue to show the current value. The prefix and suffix props customize the display.
90 °
Custom markers#
Pass a number[] to markers for custom angles.
API Reference#
CircularSlider#
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 | - |
CircularSliderValue#
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.