{"name":"angle-slider","title":"Angle Slider","description":"A circular dial slider for selecting an angle value, controlled by arrow keys or dragging the thumb around the track.","installCommand":"bunx marko-ui add angle-slider -y","usageTags":"<AngleSlider>","importSnippet":"import AngleSlider from \"@/components/ui/angle-slider/angle-slider.marko\";","usageSnippet":"<AngleSlider defaultValue=45/>","tags":["AngleSlider"],"parts":[],"props":[{"name":"aria-label","type":"string | undefined","required":false,"description":"The accessible label for the slider thumb."},{"name":"aria-labelledby","type":"string | undefined","required":false,"description":"The id of the element that labels the slider thumb."},{"name":"defaultValue","type":"number | undefined","required":false,"default":"0","description":"The initial value of the slider.\nUse when you don't need to control the value of the slider."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the slider is disabled."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the machine.\nUseful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the slider is invalid."},{"name":"name","type":"string | undefined","required":false,"description":"The name of the slider. Useful for form submission."},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the slider is read-only."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"The step value for the slider."},{"name":"value","type":"number | undefined","required":false,"description":"The value of the slider."}],"events":[{"name":"onValueChange","arg":"ValueChangeDetails","description":"The callback function for when the value changes."},{"name":"onValueChangeEnd","arg":"ValueChangeDetails","description":"The callback function for when the value changes ends."},{"name":"valueChange","arg":"number"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"angle-slider-demo","title":"Basic","source":"import AngleSlider from \"@marko-ui/shadcn/ui/angle-slider/angle-slider.marko\";\n\n<AngleSlider defaultValue=45/>","description":"An uncontrolled angle slider with an initial value."},{"id":"angle-slider-step","title":"Step","source":"import AngleSlider from \"@marko-ui/shadcn/ui/angle-slider/angle-slider.marko\";\n\n<AngleSlider defaultValue=0 step=15/>","description":"Pass `step` to snap the value to fixed degree increments while dragging."},{"id":"angle-slider-disabled","title":"Disabled","source":"import AngleSlider from \"@marko-ui/shadcn/ui/angle-slider/angle-slider.marko\";\n\n<AngleSlider defaultValue=120 disabled/>","description":"A disabled slider is skipped by the tab order and ignores pointer input."},{"id":"angle-slider-controlled","title":"Controlled","source":"import AngleSlider from \"@marko-ui/shadcn/ui/angle-slider/angle-slider.marko\";\n\n<let/value=90/>\n\n<div class=\"flex flex-col items-center gap-2\">\n  <AngleSlider value=value valueChange(next) { value = next; }/>\n  <span class=\"text-sm text-muted-foreground\">Value: ${value}&deg;</span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange` to track updates."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}