{"name":"slider","title":"Slider","description":"An input where the user selects a value from within a given range.","installCommand":"bunx marko-ui add slider -y","usageTags":"<Slider>","importSnippet":"import Slider from \"@/components/ui/slider/slider.marko\";","usageSnippet":"<Slider defaultValue=[33] max=100 step=1/>","tags":["Slider"],"parts":[],"props":[{"name":"aria-label","type":"string[] | undefined","required":false,"description":"The aria-label of each slider thumb. Useful for providing an accessible name to the slider"},{"name":"aria-labelledby","type":"string[] | undefined","required":false,"description":"The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider"},{"name":"defaultValue","type":"number[] | undefined","required":false,"description":"The initial value of the slider when rendered.\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":"form","type":"string | undefined","required":false,"description":"The associate form of the underlying input element."},{"name":"getAriaValueText","type":"((details: ValueTextDetails) => string) | undefined","required":false,"description":"Function that returns a human readable value for the slider thumb"},{"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 slider. Useful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the slider is invalid"},{"name":"largeStep","type":"number | undefined","required":false,"description":"The step value of the slider when the `Shift` key is held, or the\n`PageUp`/`PageDown` keys are used."},{"name":"max","type":"number | undefined","required":false,"default":"100","description":"The maximum value of the slider"},{"name":"min","type":"number | undefined","required":false,"default":"0","description":"The minimum value of the slider"},{"name":"minStepsBetweenThumbs","type":"number | undefined","required":false,"default":"0","description":"The minimum permitted steps between multiple thumbs.\n\n`minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.\n\n- `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`\n- `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`"},{"name":"name","type":"string | undefined","required":false,"description":"The name associated with each slider thumb (when used in a form)"},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"horizontal","description":"The orientation of the slider"},{"name":"origin","type":"'end' | 'start' | 'center' | undefined","required":false,"default":"start","description":"The origin of the slider range. The track is filled from the origin\nto the thumb for single values.\n- \"start\": Useful when the value represents an absolute value\n- \"center\": Useful when the value represents an offset (relative)\n- \"end\": Useful when the value represents an offset from the end"},{"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 of the slider"},{"name":"thumbAlignment","type":"'center' | 'contain' | undefined","required":false,"default":"contain","description":"The alignment of the slider thumb relative to the track\n- `center`: the thumb will extend beyond the bounds of the slider track.\n- `contain`: the thumb will be contained within the bounds of the track."},{"name":"thumbCollisionBehavior","type":"'none' | 'push' | 'swap' | undefined","required":false,"default":"none","description":"Controls how thumbs behave when they collide during pointer interactions.\n- `none` (default): Thumbs cannot move past each other; excess movement is ignored.\n- `push`: Thumbs push each other without restoring their previous positions when dragged back.\n- `swap`: Thumbs swap places when dragged past each other."},{"name":"thumbSize","type":"{ width: number; height: number; } | undefined","required":false,"description":"The slider thumbs dimensions"},{"name":"value","type":"number[] | undefined","required":false,"description":"The controlled value of the slider"}],"events":[{"name":"onFocusChange","arg":"FocusChangeDetails","description":"Function invoked when the slider's focused index changes"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function invoked when the value of the slider changes"},{"name":"onValueChangeEnd","arg":"ValueChangeDetails","description":"Function invoked when the slider value change is done"},{"name":"valueChange","arg":"number[]"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"slider-demo","title":"Basic","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<Slider class=\"w-64\" defaultValue=[33] aria-label=[\"Value\"] max=100 step=1/>","description":"A single-thumb slider bounded by `max` and `step`."},{"id":"slider-range","title":"Range","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<Slider class=\"w-64\" defaultValue=[25, 75] max=100 step=1 aria-label=[\"Minimum value\",\"Maximum value\"]/>","description":"Pass two values in `defaultValue` for a range slider with two thumbs."},{"id":"slider-multiple","title":"Multiple Thumbs","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<Slider class=\"w-64\" defaultValue=[10, 40, 70, 90] max=100 step=1 aria-label=[\"First value\",\"Second value\",\"Third value\",\"Fourth value\"]/>","description":"Pass any number of values in `defaultValue` for multiple thumbs."},{"id":"slider-step","title":"Step","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<Slider class=\"w-64\" defaultValue=[50] min=0 max=100 step=10 aria-label=[\"Value\"]/>","description":"Set `min`, `max`, and `step` to control the value increments."},{"id":"slider-vertical","title":"Vertical","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<div class=\"mx-auto flex w-full max-w-xs items-center justify-center gap-6\">\n  <Slider class=\"h-40\" defaultValue=[50] max=100 step=1 orientation=\"vertical\" aria-label=[\"Value\"]/>\n  <Slider class=\"h-40\" defaultValue=[25] max=100 step=1 orientation=\"vertical\" aria-label=[\"Value\"]/>\n</div>","description":"Set `orientation=\"vertical\"` for a vertical slider."},{"id":"slider-controlled","title":"Controlled","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<let/value=[25]/>\n\n<div class=\"flex flex-col gap-4\">\n  <Slider\n    class=\"w-64\"\n    aria-label=[\"Value\"]\n    value=value\n    valueChange(next) { value = next; }\n  />\n  <span class=\"text-sm text-muted-foreground\">value: ${value.join(\", \")}</span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`.","essential":true},{"id":"slider-disabled","title":"Disabled","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<Slider class=\"w-64\" defaultValue=[50] disabled aria-label=[\"Value\"]/>","description":"A disabled slider is skipped by the tab order and ignores pointer input."},{"id":"slider-rtl","title":"RTL","source":"import Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<Slider class=\"mx-auto w-full max-w-xs\" defaultValue=[75] max=100 step=1 dir=\"rtl\" aria-label=[\"القيمة\"]/>","description":"`dir` is a Zag machine prop, so `dir=\"rtl\"` drives the slider's own layout and interaction direction, not just text flow."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}