Circular Slider

1import { CircularSlider, CircularSliderThumb, CircularSliderValue, CircularSliderMarkerGroup } from "@/components/ui/circular-slider";
2
3<CircularSlider />

1"use client";
2
3import {
4  AngleSlider as ArkAngleSlider,
5  useAngleSliderContext,
6} from "@ark-ui/react/angle-slider";
7import React from "react";
8import { cn } from "@/lib/utils";
9import { FieldLabel } from "@/registry/react/components/field";
10
11export const useCircularSlider = useAngleSliderContext;
12
13interface CircularSliderContextValue {
14  ringCircumference: number;
15  ringRadius: number;
16  size: number;
17  thickness: number;
18  thumbSize: number;
19}
20
21const CircularSliderContext = React.createContext(
22  {} as CircularSliderContextValue
23);
24
25export interface CircularSliderProps
26  extends React.ComponentProps<typeof ArkAngleSlider.Root>,
27    Partial<Pick<CircularSliderContextValue, "thickness" | "size">> {
28  markers?: boolean | number[];