@zag-js/slider 1.13.1 → 1.15.0

package/dist/index.d.mts

@@ -102,6 +102,12 @@ interface SliderProps extends DirectionProperty, CommonProperties {
     step?: number | undefined;
     /**
      * The minimum permitted steps between multiple thumbs.
+     *
+     * `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.
+     *
+     * - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`
+     * - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`
+     *
      * @default 0
      */
     minStepsBetweenThumbs?: number | undefined;

package/dist/index.d.ts

@@ -102,6 +102,12 @@ interface SliderProps extends DirectionProperty, CommonProperties {
     step?: number | undefined;
     /**
      * The minimum permitted steps between multiple thumbs.
+     *
+     * `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.
+     *
+     * - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`
+     * - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`
+     *
      * @default 0
      */
     minStepsBetweenThumbs?: number | undefined;

package/dist/index.js

@@ -202,7 +202,8 @@ function normalizeValues(params, nextValues) {
 }
 function getRangeAtIndex(params, index) {
   const { context, prop } = params;
-  return utils.getValueRanges(context.get("value"), prop("min"), prop("max"), prop("minStepsBetweenThumbs"))[index];
+  const step = prop("step") * prop("minStepsBetweenThumbs");
+  return utils.getValueRanges(context.get("value"), prop("min"), prop("max"), step)[index];
 }
 function constrainValue(params, value, index) {
   const { prop } = params;
@@ -545,7 +546,13 @@ var normalize = (value, min, max, step, minStepsBetweenThumbs) => {
   const ranges = utils.getValueRanges(value, min, max, minStepsBetweenThumbs * step);
   return ranges.map((range) => {
     const snapValue = utils.snapValueToStep(range.value, range.min, range.max, step);
-    return utils.clampValue(snapValue, range.min, range.max);
+    const rangeValue = utils.clampValue(snapValue, range.min, range.max);
+    if (!utils.isValueWithinRange(rangeValue, min, max)) {
+      throw new Error(
+        "[zag-js/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid"
+      );
+    }
+    return rangeValue;
   });
 };
 var machine = core.createMachine({
@@ -746,7 +753,9 @@ var machine = core.createMachine({
         });
       },
       invokeOnChangeEnd({ prop, context }) {
-        prop("onValueChangeEnd")?.({ value: context.get("value") });
+        queueMicrotask(() => {
+          prop("onValueChangeEnd")?.({ value: context.get("value") });
+        });
       },
       setClosestThumbIndex(params) {
         const { context, event } = params;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { raf, setElementValue, trackElementRect, queryAll, trackPointerMove, trackFormControl, getRelativePoint, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
-import { setValueAtIndex, pick, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, getClosestValueIndex, first, last, toPx, getValueTransformer } from '@zag-js/utils';
+import { setValueAtIndex, pick, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, getClosestValueIndex, isValueWithinRange, first, last, toPx, getValueTransformer } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -200,7 +200,8 @@ function normalizeValues(params, nextValues) {
 }
 function getRangeAtIndex(params, index) {
   const { context, prop } = params;
-  return getValueRanges(context.get("value"), prop("min"), prop("max"), prop("minStepsBetweenThumbs"))[index];
+  const step = prop("step") * prop("minStepsBetweenThumbs");
+  return getValueRanges(context.get("value"), prop("min"), prop("max"), step)[index];
 }
 function constrainValue(params, value, index) {
   const { prop } = params;
@@ -543,7 +544,13 @@ var normalize = (value, min, max, step, minStepsBetweenThumbs) => {
   const ranges = getValueRanges(value, min, max, minStepsBetweenThumbs * step);
   return ranges.map((range) => {
     const snapValue = snapValueToStep(range.value, range.min, range.max, step);
-    return clampValue(snapValue, range.min, range.max);
+    const rangeValue = clampValue(snapValue, range.min, range.max);
+    if (!isValueWithinRange(rangeValue, min, max)) {
+      throw new Error(
+        "[zag-js/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid"
+      );
+    }
+    return rangeValue;
   });
 };
 var machine = createMachine({
@@ -744,7 +751,9 @@ var machine = createMachine({
         });
       },
       invokeOnChangeEnd({ prop, context }) {
-        prop("onValueChangeEnd")?.({ value: context.get("value") });
+        queueMicrotask(() => {
+          prop("onValueChangeEnd")?.({ value: context.get("value") });
+        });
       },
       setClosestThumbIndex(params) {
         const { context, event } = params;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.13.1",
+  "version": "1.15.0",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.13.1",
-    "@zag-js/core": "1.13.1",
-    "@zag-js/dom-query": "1.13.1",
-    "@zag-js/utils": "1.13.1",
-    "@zag-js/types": "1.13.1"
+    "@zag-js/anatomy": "1.15.0",
+    "@zag-js/core": "1.15.0",
+    "@zag-js/dom-query": "1.15.0",
+    "@zag-js/utils": "1.15.0",
+    "@zag-js/types": "1.15.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"