@zag-js/slider 0.24.0 → 0.26.0

package/src/slider.connect.ts

@@ -13,178 +13,106 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./slider.anatomy"
 import { dom } from "./slider.dom"
 import type { MachineApi, Send, State } from "./slider.types"
+import { getRangeAtIndex } from "./slider.utils"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const ariaLabel = state.context["aria-label"]
   const ariaLabelledBy = state.context["aria-labelledby"]
-  const ariaValueText = state.context.getAriaValueText?.(state.context.value)
+  const sliderValue = state.context.value
 
   const isFocused = state.matches("focus")
   const isDragging = state.matches("dragging")
+
   const isDisabled = state.context.isDisabled
-  const isInteractive = state.context.isInteractive
   const isInvalid = state.context.invalid
-
-  function getPercentValueFn(percent: number) {
-    return getPercentValue(percent, state.context.min, state.context.max, state.context.step)
-  }
+  const isInteractive = state.context.isInteractive
 
   function getValuePercentFn(value: number) {
     return getValuePercent(value, state.context.min, state.context.max)
   }
 
+  function getPercentValueFn(percent: number) {
+    return getPercentValue(percent, state.context.min, state.context.max, state.context.step)
+  }
+
   return {
-    isFocused,
-    isDragging,
     value: state.context.value,
-    percent: getValuePercent(state.context.value, state.context.min, state.context.max),
-
-    setValue(value: number) {
-      send({ type: "SET_VALUE", value })
+    isDragging,
+    isFocused,
+    setValue(value) {
+      send({ type: "SET_VALUE", value: value })
+    },
+    getThumbValue(index) {
+      return sliderValue[index]
+    },
+    setThumbValue(index, value) {
+      send({ type: "SET_VALUE", index, value })
     },
-
-    getPercentValue: getPercentValueFn,
-
     getValuePercent: getValuePercentFn,
-
-    focus() {
-      dom.getThumbEl(state.context)?.focus()
+    getPercentValue: getPercentValueFn,
+    getThumbPercent(index) {
+      return getValuePercentFn(sliderValue[index])
     },
-    /**
-     * Function to increment the value of the slider by the step.
-     */
-    increment() {
-      send("INCREMENT")
+    setThumbPercent(index, percent) {
+      const value = getPercentValueFn(percent)
+      send({ type: "SET_VALUE", index, value })
     },
-
-    decrement() {
-      send("DECREMENT")
+    getThumbMin(index) {
+      return getRangeAtIndex(state.context, index).min
+    },
+    getThumbMax(index) {
+      return getRangeAtIndex(state.context, index).max
+    },
+    increment(index) {
+      send({ type: "INCREMENT", index })
+    },
+    decrement(index) {
+      send({ type: "DECREMENT", index })
+    },
+    focus() {
+      if (!isInteractive) return
+      send({ type: "FOCUS", index: 0 })
     },
-
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      id: dom.getRootId(state.context),
-      dir: state.context.dir,
-      style: dom.getRootStyle(state.context),
-    }),
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
-      dir: state.context.dir,
       id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context, 0),
       onClick(event) {
         if (!isInteractive) return
         event.preventDefault()
-        dom.getThumbEl(state.context)?.focus()
+        dom.getFirstEl(state.context)?.focus()
+      },
+      style: {
+        userSelect: "none",
       },
-      style: dom.getLabelStyle(),
     }),
 
-    thumbProps: normalize.element({
-      ...parts.thumb.attrs,
-      dir: state.context.dir,
-      id: dom.getThumbId(state.context),
+    rootProps: normalize.element({
+      ...parts.root.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      draggable: false,
-      "aria-invalid": ariaAttr(isInvalid),
       "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": ariaAttr(isDisabled),
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy ?? dom.getLabelId(state.context),
-      "aria-orientation": state.context.orientation,
-      "aria-valuemax": state.context.max,
-      "aria-valuemin": state.context.min,
-      "aria-valuenow": state.context.value,
-      "aria-valuetext": ariaValueText,
-      role: "slider",
-      tabIndex: isDisabled ? undefined : 0,
-      onPointerDown(event) {
-        if (!isInteractive) return
-        send({ type: "THUMB_POINTER_DOWN" })
-        event.stopPropagation()
-      },
-      onBlur() {
-        if (!isInteractive) return
-        send("BLUR")
-      },
-      onFocus() {
-        if (!isInteractive) return
-        send("FOCUS")
-      },
-      onKeyDown(event) {
-        if (!isInteractive) return
-        const step = getEventStep(event) * state.context.step
-        let prevent = true
-        const keyMap: EventKeyMap = {
-          ArrowUp() {
-            send({ type: "ARROW_UP", step })
-            prevent = state.context.isVertical
-          },
-          ArrowDown() {
-            send({ type: "ARROW_DOWN", step })
-            prevent = state.context.isVertical
-          },
-          ArrowLeft() {
-            send({ type: "ARROW_LEFT", step })
-            prevent = state.context.isHorizontal
-          },
-          ArrowRight() {
-            send({ type: "ARROW_RIGHT", step })
-            prevent = state.context.isHorizontal
-          },
-          PageUp() {
-            send({ type: "PAGE_UP", step })
-          },
-          PageDown() {
-            send({ type: "PAGE_DOWN", step })
-          },
-          Home() {
-            send("HOME")
-          },
-          End() {
-            send("END")
-          },
-        }
-
-        const key = getEventKey(event, state.context)
-        const exec = keyMap[key]
-
-        if (!exec) return
-        exec(event)
-
-        if (prevent) {
-          event.preventDefault()
-        }
-      },
-      style: dom.getThumbStyle(state.context),
-    }),
-
-    hiddenInputProps: normalize.input({
-      defaultValue: state.context.value,
-      name: state.context.name,
-      form: state.context.form,
-      id: dom.getHiddenInputId(state.context),
-      hidden: true,
+      "data-focus": dataAttr(isFocused),
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: dom.getRootStyle(state.context),
     }),
 
     outputProps: normalize.output({
       ...parts.output.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
       id: dom.getOutputId(state.context),
-      dir: state.context.dir,
-      htmlFor: dom.getHiddenInputId(state.context),
+      htmlFor: sliderValue.map((_v, i) => dom.getHiddenInputId(state.context, i)).join(" "),
       "aria-live": "off",
     }),
 
@@ -193,16 +121,119 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       dir: state.context.dir,
       id: dom.getTrackId(state.context),
       "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
-      style: dom.getTrackStyle(),
+      "data-focus": dataAttr(isFocused),
+      style: { position: "relative" },
     }),
 
+    getThumbProps(props) {
+      const { index } = props
+
+      const value = sliderValue[index]
+      const range = getRangeAtIndex(state.context, index)
+      const ariaValueText = state.context.getAriaValueText?.(value, index)
+      const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel
+      const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy
+
+      return normalize.element({
+        ...parts.thumb.attrs,
+        dir: state.context.dir,
+        "data-index": index,
+        id: dom.getThumbId(state.context, index),
+        "data-disabled": dataAttr(isDisabled),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(isFocused && state.context.focusedIndex === index),
+        draggable: false,
+        "aria-disabled": ariaAttr(isDisabled),
+        "aria-label": _ariaLabel,
+        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
+        "aria-orientation": state.context.orientation,
+        "aria-valuemax": range.max,
+        "aria-valuemin": range.min,
+        "aria-valuenow": sliderValue[index],
+        "aria-valuetext": ariaValueText,
+        role: "slider",
+        tabIndex: isDisabled ? undefined : 0,
+        style: dom.getThumbStyle(state.context, index),
+        onPointerDown(event) {
+          if (!isInteractive) return
+          send({ type: "THUMB_POINTER_DOWN", index })
+          event.stopPropagation()
+        },
+        onBlur() {
+          if (!isInteractive) return
+          send("BLUR")
+        },
+        onFocus() {
+          if (!isInteractive) return
+          send({ type: "FOCUS", index })
+        },
+        onKeyDown(event) {
+          if (!isInteractive) return
+          const step = getEventStep(event) * state.context.step
+          let prevent = true
+          const keyMap: EventKeyMap = {
+            ArrowUp() {
+              send({ type: "ARROW_UP", step })
+              prevent = state.context.isVertical
+            },
+            ArrowDown() {
+              send({ type: "ARROW_DOWN", step })
+              prevent = state.context.isVertical
+            },
+            ArrowLeft() {
+              send({ type: "ARROW_LEFT", step })
+              prevent = state.context.isHorizontal
+            },
+            ArrowRight() {
+              send({ type: "ARROW_RIGHT", step })
+              prevent = state.context.isHorizontal
+            },
+            PageUp() {
+              send({ type: "PAGE_UP", step })
+            },
+            PageDown() {
+              send({ type: "PAGE_DOWN", step })
+            },
+            Home() {
+              send("HOME")
+            },
+            End() {
+              send("END")
+            },
+          }
+
+          const key = getEventKey(event, state.context)
+          const exec = keyMap[key]
+
+          if (!exec) return
+          exec(event)
+
+          if (prevent) {
+            event.preventDefault()
+            event.stopPropagation()
+          }
+        },
+      })
+    },
+
+    getHiddenInputProps(props) {
+      const { index } = props
+      return normalize.input({
+        name: `${state.context.name}[${index}]`,
+        form: state.context.form,
+        type: "text",
+        hidden: true,
+        defaultValue: state.context.value[index],
+        id: dom.getHiddenInputId(state.context, index),
+      })
+    },
+
     rangeProps: normalize.element({
+      id: dom.getRangeId(state.context),
       ...parts.range.attrs,
       dir: state.context.dir,
-      id: dom.getRangeId(state.context),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-disabled": dataAttr(isDisabled),
@@ -215,9 +246,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       dir: state.context.dir,
       id: dom.getControlId(state.context),
       "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
+      style: dom.getControlStyle(),
       onPointerDown(event) {
         if (!isInteractive) return
 
@@ -230,30 +262,39 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         event.preventDefault()
         event.stopPropagation()
       },
-      style: dom.getControlStyle(),
     }),
 
     markerGroupProps: normalize.element({
       ...parts.markerGroup.attrs,
-      dir: state.context.dir,
       role: "presentation",
+      dir: state.context.dir,
       "aria-hidden": true,
       "data-orientation": state.context.orientation,
       style: dom.getMarkerGroupStyle(),
     }),
 
-    getMarkerProps({ value }: { value: number }) {
-      const style = dom.getMarkerStyle(state.context, value)
-      const markerState =
-        value > state.context.value ? "over-value" : value === state.context.value ? "at-value" : "under-value"
+    getMarkerProps(props) {
+      const style = dom.getMarkerStyle(state.context, props.value)
+      let markerState: "over-value" | "under-value" | "at-value"
+
+      const first = state.context.value[0]
+      const last = state.context.value[state.context.value.length - 1]
+
+      if (props.value < first) {
+        markerState = "under-value"
+      } else if (props.value > last) {
+        markerState = "over-value"
+      } else {
+        markerState = "at-value"
+      }
 
       return normalize.element({
         ...parts.marker.attrs,
-        dir: state.context.dir,
-        id: dom.getMarkerId(state.context, value),
+        id: dom.getMarkerId(state.context, props.value),
         role: "presentation",
+        dir: state.context.dir,
         "data-orientation": state.context.orientation,
-        "data-value": value,
+        "data-value": props.value,
         "data-disabled": dataAttr(isDisabled),
         "data-state": markerState,
         style,

package/src/slider.dom.ts

@@ -1,32 +1,33 @@
-import { getRelativePoint } from "@zag-js/dom-event"
-import { createScope } from "@zag-js/dom-query"
+import { getRelativePoint, type Point } from "@zag-js/dom-event"
+import { createScope, queryAll } from "@zag-js/dom-query"
 import { dispatchInputValueEvent } from "@zag-js/form-utils"
 import { getPercentValue } from "@zag-js/numeric-range"
-import { styles } from "./slider.style"
-import type { MachineContext as Ctx, Point } from "./slider.types"
+import { styleGetterFns } from "./slider.style"
+import type { MachineContext as Ctx } from "./slider.types"
 
 export const dom = createScope({
-  ...styles,
-
+  ...styleGetterFns,
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx: Ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getThumbId: (ctx: Ctx, index: number) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
+  getHiddenInputId: (ctx: Ctx, index: number) => `slider:${ctx.id}:input:${index}`,
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `slider:${ctx.id}:input`,
-  getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
-  getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
-  getRangeId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
+  getRangeId: (ctx: Ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
   getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getMarkerId: (ctx: Ctx, value: number) => `slider:${ctx.id}:marker:${value}`,
+  getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getMarkerId: (ctx: Ctx, value: number) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
+  getThumbEl: (ctx: Ctx, index: number) => dom.getById(ctx, dom.getThumbId(ctx, index)),
+  getHiddenInputEl: (ctx: Ctx, index: number) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx, index)),
   getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
+  getElements: (ctx: Ctx) => queryAll(dom.getControlEl(ctx), "[role=slider]"),
+  getFirstEl: (ctx: Ctx) => dom.getElements(ctx)[0],
+  getRangeEl: (ctx: Ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
 
-  getValueFromPoint(ctx: Ctx, point: Point): number | undefined {
+  getValueFromPoint(ctx: Ctx, point: Point) {
     const controlEl = dom.getControlEl(ctx)
     if (!controlEl) return
-
     const relativePoint = getRelativePoint(point, controlEl)
     const percent = relativePoint.getPercentValue({
       orientation: ctx.orientation,
@@ -35,10 +36,12 @@ export const dom = createScope({
     })
     return getPercentValue(percent, ctx.min, ctx.max, ctx.step)
   },
-
   dispatchChangeEvent(ctx: Ctx) {
-    const input = dom.getHiddenInputEl(ctx)
-    if (!input) return
-    dispatchInputValueEvent(input, { value: ctx.value })
+    const valueArray = Array.from(ctx.value)
+    valueArray.forEach((value, index) => {
+      const inputEl = dom.getHiddenInputEl(ctx, index)
+      if (!inputEl) return
+      dispatchInputValueEvent(inputEl, { value })
+    })
   },
 })