@zag-js/slider 0.23.0 → 0.25.0

package/src/slider.machine.ts

@@ -1,13 +1,25 @@
 import { createMachine } from "@zag-js/core"
 import { trackPointerMove } from "@zag-js/dom-event"
 import { raf } from "@zag-js/dom-query"
-import { trackElementSize } from "@zag-js/element-size"
+import { trackElementsSize, type ElementSize } from "@zag-js/element-size"
 import { trackFormControl } from "@zag-js/form-utils"
-import { clampValue, getValuePercent } from "@zag-js/numeric-range"
+import { getValuePercent } from "@zag-js/numeric-range"
 import { compact, isEqual } from "@zag-js/utils"
 import { dom } from "./slider.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types"
-import { constrainValue, decrement, increment } from "./slider.utils"
+import {
+  assignArray,
+  constrainValue,
+  decrement,
+  getClosestIndex,
+  getRangeAtIndex,
+  increment,
+  normalizeValues,
+} from "./slider.utils"
+
+const isEqualSize = (a: ElementSize | null, b: ElementSize | null) => {
+  return a?.width === b?.width && a?.height === b?.height
+}
 
 export function machine(userContext: UserDefinedContext) {
   const ctx = compact(userContext)
@@ -15,17 +27,19 @@ export function machine(userContext: UserDefinedContext) {
     {
       id: "slider",
       initial: "idle",
+
       context: {
         thumbSize: null,
         thumbAlignment: "contain",
-        threshold: 5,
-        dir: "ltr",
-        origin: "start",
-        orientation: "horizontal",
-        value: 0,
-        step: 1,
+        focusedIndex: -1,
         min: 0,
         max: 100,
+        step: 1,
+        value: [0],
+        origin: "start",
+        orientation: "horizontal",
+        dir: "ltr",
+        minStepsBetweenThumbs: 0,
         disabled: false,
         ...ctx,
         fieldsetDisabled: false,
@@ -35,92 +49,103 @@ export function machine(userContext: UserDefinedContext) {
         isHorizontal: (ctx) => ctx.orientation === "horizontal",
         isVertical: (ctx) => ctx.orientation === "vertical",
         isRtl: (ctx) => ctx.orientation === "horizontal" && ctx.dir === "rtl",
-        isDisabled: (ctx) => ctx.disabled || ctx.fieldsetDisabled,
-        isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),
-        hasMeasuredThumbSize: (ctx) => ctx.thumbSize !== null,
-        valuePercent: (ctx) => 100 * getValuePercent(ctx.value, ctx.min, ctx.max),
+        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
+        isInteractive: (ctx) => !(ctx.readOnly || ctx.isDisabled),
+        spacing: (ctx) => ctx.minStepsBetweenThumbs * ctx.step,
+        hasMeasuredThumbSize: (ctx) => ctx.thumbSize != null,
+        valuePercent(ctx) {
+          return ctx.value.map((value) => 100 * getValuePercent(value, ctx.min, ctx.max))
+        },
       },
 
       watch: {
-        value: ["syncInputElement"],
+        value: ["syncInputElements"],
       },
 
-      activities: ["trackFormControlState", "trackThumbSize"],
+      entry: ["coarseValue"],
+
+      activities: ["trackFormControlState", "trackThumbsSize"],
 
       on: {
-        SET_VALUE: {
-          actions: "setValue",
-        },
+        SET_VALUE: [
+          {
+            guard: "hasIndex",
+            actions: "setValueAtIndex",
+          },
+          { actions: "setValue" },
+        ],
         INCREMENT: {
-          actions: "increment",
+          actions: "incrementAtIndex",
         },
         DECREMENT: {
-          actions: "decrement",
+          actions: "decrementAtIndex",
         },
       },
 
-      entry: ["checkValue"],
-
       states: {
         idle: {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"],
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"],
+            },
+            FOCUS: {
+              target: "focus",
+              actions: "setFocusedIndex",
             },
-            FOCUS: "focus",
             THUMB_POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart", "focusThumb"],
+              actions: ["setFocusedIndex", "focusActiveThumb"],
             },
           },
         },
-
         focus: {
-          entry: "focusThumb",
+          entry: "focusActiveThumb",
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"],
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"],
             },
             THUMB_POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart", "focusThumb"],
+              actions: ["setFocusedIndex", "focusActiveThumb"],
             },
             ARROW_LEFT: {
               guard: "isHorizontal",
-              actions: "decrement",
+              actions: "decrementAtIndex",
             },
             ARROW_RIGHT: {
               guard: "isHorizontal",
-              actions: "increment",
+              actions: "incrementAtIndex",
             },
             ARROW_UP: {
               guard: "isVertical",
-              actions: "increment",
+              actions: "incrementAtIndex",
             },
             ARROW_DOWN: {
               guard: "isVertical",
-              actions: "decrement",
+              actions: "decrementAtIndex",
             },
             PAGE_UP: {
-              actions: "increment",
+              actions: "incrementAtIndex",
             },
             PAGE_DOWN: {
-              actions: "decrement",
+              actions: "decrementAtIndex",
             },
             HOME: {
-              actions: "setToMin",
+              actions: "setActiveThumbToMin",
             },
             END: {
-              actions: "setToMax",
+              actions: "setActiveThumbToMax",
+            },
+            BLUR: {
+              target: "idle",
+              actions: "clearFocusedIndex",
             },
-            BLUR: "idle",
           },
         },
-
         dragging: {
-          entry: "focusThumb",
+          entry: "focusActiveThumb",
           activities: "trackPointerMove",
           on: {
             POINTER_UP: {
@@ -138,11 +163,11 @@ export function machine(userContext: UserDefinedContext) {
       guards: {
         isHorizontal: (ctx) => ctx.isHorizontal,
         isVertical: (ctx) => ctx.isVertical,
+        hasIndex: (_ctx, evt) => evt.index != null,
       },
-
       activities: {
         trackFormControlState(ctx, _evt, { initialContext }) {
-          return trackFormControl(dom.getHiddenInputEl(ctx), {
+          return trackFormControl(dom.getRootEl(ctx), {
             onFieldsetDisabledChange(disabled) {
               ctx.fieldsetDisabled = disabled
             },
@@ -162,53 +187,82 @@ export function machine(userContext: UserDefinedContext) {
             },
           })
         },
-        trackThumbSize(ctx, _evt) {
+        trackThumbsSize(ctx) {
           if (ctx.thumbAlignment !== "contain" || ctx.thumbSize) return
-          return trackElementSize(dom.getThumbEl(ctx), (size) => {
-            if (size) ctx.thumbSize = size
+
+          return trackElementsSize({
+            getNodes: () => dom.getElements(ctx),
+            observeMutation: true,
+            callback(size) {
+              if (!size || isEqualSize(ctx.thumbSize, size)) return
+              ctx.thumbSize = size
+            },
           })
         },
       },
-
       actions: {
-        checkValue(ctx) {
-          ctx.value = constrainValue(ctx, ctx.value)
-        },
-        invokeOnChangeStart(ctx) {
-          ctx.onValueChangeStart?.({ value: ctx.value })
+        syncInputElements(ctx) {
+          ctx.value.forEach((value, index) => {
+            const inputEl = dom.getHiddenInputEl(ctx, index)
+            dom.setValue(inputEl, value)
+          })
         },
         invokeOnChangeEnd(ctx) {
           ctx.onValueChangeEnd?.({ value: ctx.value })
         },
+        setClosestThumbIndex(ctx, evt) {
+          const pointValue = dom.getValueFromPoint(ctx, evt.point)
+          if (pointValue == null) return
+
+          const focusedIndex = getClosestIndex(ctx, pointValue)
+          set.focusedIndex(ctx, focusedIndex)
+        },
+        setFocusedIndex(ctx, evt) {
+          set.focusedIndex(ctx, evt.index)
+        },
+        clearFocusedIndex(ctx) {
+          set.focusedIndex(ctx, -1)
+        },
         setPointerValue(ctx, evt) {
-          const value = dom.getValueFromPoint(ctx, evt.point)
-          if (value == null) return
-          set.value(ctx, clampValue(value, ctx.min, ctx.max))
+          const pointerValue = dom.getValueFromPoint(ctx, evt.point)
+          if (pointerValue == null) return
+
+          const value = constrainValue(ctx, pointerValue, ctx.focusedIndex)
+          set.valueAtIndex(ctx, ctx.focusedIndex, value)
         },
-        focusThumb(ctx) {
-          raf(() => dom.getThumbEl(ctx)?.focus({ preventScroll: true }))
+        focusActiveThumb(ctx) {
+          raf(() => {
+            const thumbEl = dom.getThumbEl(ctx, ctx.focusedIndex)
+            thumbEl?.focus({ preventScroll: true })
+          })
         },
-        decrement(ctx, evt) {
-          const value = decrement(ctx, evt.step)
+        decrementAtIndex(ctx, evt) {
+          const value = decrement(ctx, evt.index, evt.step)
           set.value(ctx, value)
         },
-        increment(ctx, evt) {
-          const value = increment(ctx, evt.step)
+        incrementAtIndex(ctx, evt) {
+          const value = increment(ctx, evt.index, evt.step)
           set.value(ctx, value)
         },
-        setToMin(ctx) {
-          set.value(ctx, ctx.min)
+        setActiveThumbToMin(ctx) {
+          const { min } = getRangeAtIndex(ctx, ctx.focusedIndex)
+          set.valueAtIndex(ctx, ctx.focusedIndex, min)
         },
-        setToMax(ctx) {
-          set.value(ctx, ctx.max)
+        setActiveThumbToMax(ctx) {
+          const { max } = getRangeAtIndex(ctx, ctx.focusedIndex)
+          set.valueAtIndex(ctx, ctx.focusedIndex, max)
         },
-        setValue(ctx, evt) {
-          const value = constrainValue(ctx, evt.value)
+        coarseValue(ctx) {
+          const value = normalizeValues(ctx, ctx.value)
           set.value(ctx, value)
         },
-        syncInputElement(ctx) {
-          const inputEl = dom.getHiddenInputEl(ctx)
-          dom.setValue(inputEl, ctx.value)
+        setValueAtIndex(ctx, evt) {
+          const value = constrainValue(ctx, evt.value, evt.index)
+          set.valueAtIndex(ctx, evt.index, value)
+        },
+        setValue(ctx, evt) {
+          const value = normalizeValues(ctx, evt.value)
+          set.value(ctx, value)
         },
       },
     },
@@ -217,15 +271,33 @@ export function machine(userContext: UserDefinedContext) {
 
 const invoke = {
   change: (ctx: MachineContext) => {
-    ctx.onValueChange?.({ value: ctx.value })
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value),
+    })
     dom.dispatchChangeEvent(ctx)
   },
+  focusChange: (ctx: MachineContext) => {
+    ctx.onFocusChange?.({
+      value: Array.from(ctx.value),
+      focusedIndex: ctx.focusedIndex,
+    })
+  },
 }
 
 const set = {
-  value: (ctx: MachineContext, value: number) => {
+  valueAtIndex: (ctx: MachineContext, index: number, value: number) => {
+    if (isEqual(ctx.value[index], value)) return
+    ctx.value[index] = value
+    invoke.change(ctx)
+  },
+  value: (ctx: MachineContext, value: number[]) => {
     if (isEqual(ctx.value, value)) return
-    ctx.value = value
+    assignArray(ctx.value, value)
     invoke.change(ctx)
   },
+  focusedIndex: (ctx: MachineContext, index: number) => {
+    if (isEqual(ctx.focusedIndex, index)) return
+    ctx.focusedIndex = index
+    invoke.focusChange(ctx)
+  },
 }

package/src/slider.style.ts

@@ -2,6 +2,50 @@ import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range"
 import type { Style } from "@zag-js/types"
 import type { MachineContext as Ctx, SharedContext } from "./slider.types"
 
+/* -----------------------------------------------------------------------------
+ * Range style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getBounds<T>(value: T[]): [T, T] {
+  const firstValue = value[0]
+  const lastThumb = value[value.length - 1]
+  return [firstValue, lastThumb]
+}
+
+export function getRangeOffsets(ctx: Ctx) {
+  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent)
+
+  if (ctx.valuePercent.length === 1) {
+    if (ctx.origin === "center") {
+      const isNegative = ctx.valuePercent[0] < 50
+      const start = isNegative ? `${ctx.valuePercent[0]}%` : "50%"
+      const end = isNegative ? "50%" : `${100 - ctx.valuePercent[0]}%`
+
+      return { start, end }
+    }
+
+    return { start: "0%", end: `${100 - lastPercent}%` }
+  }
+
+  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` }
+}
+
+function getRangeStyle(ctx: Pick<SharedContext, "isVertical" | "isRtl">): Style {
+  if (ctx.isVertical) {
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)",
+    }
+  }
+
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)",
+  }
+}
+
 /* -----------------------------------------------------------------------------
  * Thumb style calculations
  * -----------------------------------------------------------------------------*/
@@ -35,7 +79,7 @@ function getThumbOffset(ctx: SharedContext) {
   return getOffset(ctx, percent)
 }
 
-function getVisibility(ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredThumbSize">) {
+function getVisibility(ctx: Ctx) {
   let visibility: "visible" | "hidden" = "visible"
   if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
     visibility = "hidden"
@@ -43,46 +87,13 @@ function getVisibility(ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredT
   return visibility
 }
 
-function getThumbStyle(ctx: SharedContext): Style {
+function getThumbStyle(ctx: Ctx, index: number): Style {
   const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart"
   return {
     visibility: getVisibility(ctx),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
-    [placementProp]: "var(--slider-thumb-offset)",
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Range style calculations
- * -----------------------------------------------------------------------------*/
-
-function getRangeOffsets(ctx: Ctx) {
-  let start = "0%"
-  let end = `${100 - ctx.valuePercent}%`
-
-  if (ctx.origin === "center") {
-    const isNegative = ctx.valuePercent < 50
-    start = isNegative ? `${ctx.valuePercent}%` : "50%"
-    end = isNegative ? "50%" : end
-  }
-
-  return { start, end }
-}
-
-function getRangeStyle(ctx: Pick<SharedContext, "isVertical" | "isRtl">): Style {
-  if (ctx.isVertical) {
-    return {
-      position: "absolute",
-      bottom: "var(--slider-range-start)",
-      top: "var(--slider-range-end)",
-    }
-  }
-
-  return {
-    position: "absolute",
-    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
-    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)",
+    [placementProp]: `var(--slider-thumb-offset-${index})`,
   }
 }
 
@@ -104,9 +115,15 @@ function getControlStyle(): Style {
 
 function getRootStyle(ctx: Ctx): Style {
   const range = getRangeOffsets(ctx)
+
+  const offsetStyles = ctx.value.reduce<Style>((styles, value, index) => {
+    const offset = getThumbOffset({ ...ctx, value })
+    return { ...styles, [`--slider-thumb-offset-${index}`]: offset }
+  }, {})
+
   return {
+    ...offsetStyles,
     "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
-    "--slider-thumb-offset": getThumbOffset(ctx),
     "--slider-range-start": range.start,
     "--slider-range-end": range.end,
   }
@@ -121,6 +138,7 @@ function getMarkerStyle(
   value: number,
 ): Style {
   return {
+    // @ts-expect-error
     visibility: getVisibility(ctx),
     position: "absolute",
     pointerEvents: "none",
@@ -132,22 +150,6 @@ function getMarkerStyle(
   }
 }
 
-/* -----------------------------------------------------------------------------
- * Label style calculations
- * -----------------------------------------------------------------------------*/
-
-function getLabelStyle(): Style {
-  return { userSelect: "none" }
-}
-
-/* -----------------------------------------------------------------------------
- * Label style calculations
- * -----------------------------------------------------------------------------*/
-
-function getTrackStyle(): Style {
-  return { position: "relative" }
-}
-
 /* -----------------------------------------------------------------------------
  * Label style calculations
  * -----------------------------------------------------------------------------*/
@@ -160,14 +162,11 @@ function getMarkerGroupStyle(): Style {
   }
 }
 
-export const styles = {
-  getThumbOffset,
+export const styleGetterFns = {
+  getRootStyle,
   getControlStyle,
   getThumbStyle,
   getRangeStyle,
-  getRootStyle,
   getMarkerStyle,
-  getLabelStyle,
-  getTrackStyle,
   getMarkerGroupStyle,
 }