@zag-js/slider 1.3.3 → 1.4.1

package/dist/index.js

@@ -229,7 +229,7 @@ function getClosestIndex(params, pointValue) {
 }
 
 // src/slider.connect.ts
-function connect(service, normalize) {
+function connect(service, normalize2) {
   const { state, send, context, prop, computed, scope } = service;
   const ariaLabel = prop("aria-label");
   const ariaLabelledBy = prop("aria-labelledby");
@@ -287,7 +287,7 @@ function connect(service, normalize) {
       send({ type: "FOCUS", index: 0 });
     },
     getLabelProps() {
-      return normalize.label({
+      return normalize2.label({
         ...parts.label.attrs,
         dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
@@ -309,7 +309,7 @@ function connect(service, normalize) {
       });
     },
     getRootProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.root.attrs,
         "data-disabled": domQuery.dataAttr(disabled),
         "data-orientation": prop("orientation"),
@@ -322,7 +322,7 @@ function connect(service, normalize) {
       });
     },
     getValueTextProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.valueText.attrs,
         dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
@@ -333,7 +333,7 @@ function connect(service, normalize) {
       });
     },
     getTrackProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.track.attrs,
         dir: prop("dir"),
         id: getTrackId(scope),
@@ -352,7 +352,7 @@ function connect(service, normalize) {
       const valueText = prop("getAriaValueText")?.({ value, index });
       const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
       const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
-      return normalize.element({
+      return normalize2.element({
         ...parts.thumb.attrs,
         dir: prop("dir"),
         "data-index": index,
@@ -436,7 +436,7 @@ function connect(service, normalize) {
     },
     getHiddenInputProps(props2) {
       const { index = 0, name } = props2;
-      return normalize.input({
+      return normalize2.input({
         name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
         form: prop("form"),
         type: "text",
@@ -446,7 +446,7 @@ function connect(service, normalize) {
       });
     },
     getRangeProps() {
-      return normalize.element({
+      return normalize2.element({
         id: getRangeId(scope),
         ...parts.range.attrs,
         dir: prop("dir"),
@@ -459,7 +459,7 @@ function connect(service, normalize) {
       });
     },
     getControlProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.control.attrs,
         dir: prop("dir"),
         id: getControlId(scope),
@@ -481,7 +481,7 @@ function connect(service, normalize) {
       });
     },
     getMarkerGroupProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.markerGroup.attrs,
         role: "presentation",
         dir: prop("dir"),
@@ -500,7 +500,7 @@ function connect(service, normalize) {
       } else {
         markerState = "at-value";
       }
-      return normalize.element({
+      return normalize2.element({
         ...parts.marker.attrs,
         id: getMarkerId(scope, props2.value),
         role: "presentation",
@@ -515,7 +515,7 @@ function connect(service, normalize) {
     getDraggingIndicatorProps(props2) {
       const { index = 0 } = props2;
       const isDragging = index === focusedIndex && dragging;
-      return normalize.element({
+      return normalize2.element({
         ...parts.draggingIndicator.attrs,
         role: "presentation",
         dir: prop("dir"),
@@ -530,19 +530,32 @@ function connect(service, normalize) {
 var isEqualSize = (a, b) => {
   return a?.width === b?.width && a?.height === b?.height;
 };
+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);
+  });
+};
 var machine = core.createMachine({
   props({ props: props2 }) {
+    const min = props2.min ?? 0;
+    const max = props2.max ?? 100;
+    const step = props2.step ?? 1;
+    const defaultValue = props2.defaultValue ?? [min];
+    const minStepsBetweenThumbs = props2.minStepsBetweenThumbs ?? 0;
     return {
       dir: "ltr",
       thumbAlignment: "contain",
-      min: 0,
-      max: 100,
-      step: 1,
-      defaultValue: [0],
       origin: "start",
       orientation: "horizontal",
-      minStepsBetweenThumbs: 0,
-      ...props2
+      minStepsBetweenThumbs,
+      ...props2,
+      defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
+      value: props2.value ? normalize(props2.value, min, max, step, minStepsBetweenThumbs) : void 0,
+      max,
+      step,
+      min
     };
   },
   initialState() {

package/dist/index.mjs

@@ -227,7 +227,7 @@ function getClosestIndex(params, pointValue) {
 }
 
 // src/slider.connect.ts
-function connect(service, normalize) {
+function connect(service, normalize2) {
   const { state, send, context, prop, computed, scope } = service;
   const ariaLabel = prop("aria-label");
   const ariaLabelledBy = prop("aria-labelledby");
@@ -285,7 +285,7 @@ function connect(service, normalize) {
       send({ type: "FOCUS", index: 0 });
     },
     getLabelProps() {
-      return normalize.label({
+      return normalize2.label({
         ...parts.label.attrs,
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
@@ -307,7 +307,7 @@ function connect(service, normalize) {
       });
     },
     getRootProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.root.attrs,
         "data-disabled": dataAttr(disabled),
         "data-orientation": prop("orientation"),
@@ -320,7 +320,7 @@ function connect(service, normalize) {
       });
     },
     getValueTextProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.valueText.attrs,
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
@@ -331,7 +331,7 @@ function connect(service, normalize) {
       });
     },
     getTrackProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.track.attrs,
         dir: prop("dir"),
         id: getTrackId(scope),
@@ -350,7 +350,7 @@ function connect(service, normalize) {
       const valueText = prop("getAriaValueText")?.({ value, index });
       const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
       const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
-      return normalize.element({
+      return normalize2.element({
         ...parts.thumb.attrs,
         dir: prop("dir"),
         "data-index": index,
@@ -434,7 +434,7 @@ function connect(service, normalize) {
     },
     getHiddenInputProps(props2) {
       const { index = 0, name } = props2;
-      return normalize.input({
+      return normalize2.input({
         name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
         form: prop("form"),
         type: "text",
@@ -444,7 +444,7 @@ function connect(service, normalize) {
       });
     },
     getRangeProps() {
-      return normalize.element({
+      return normalize2.element({
         id: getRangeId(scope),
         ...parts.range.attrs,
         dir: prop("dir"),
@@ -457,7 +457,7 @@ function connect(service, normalize) {
       });
     },
     getControlProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.control.attrs,
         dir: prop("dir"),
         id: getControlId(scope),
@@ -479,7 +479,7 @@ function connect(service, normalize) {
       });
     },
     getMarkerGroupProps() {
-      return normalize.element({
+      return normalize2.element({
         ...parts.markerGroup.attrs,
         role: "presentation",
         dir: prop("dir"),
@@ -498,7 +498,7 @@ function connect(service, normalize) {
       } else {
         markerState = "at-value";
       }
-      return normalize.element({
+      return normalize2.element({
         ...parts.marker.attrs,
         id: getMarkerId(scope, props2.value),
         role: "presentation",
@@ -513,7 +513,7 @@ function connect(service, normalize) {
     getDraggingIndicatorProps(props2) {
       const { index = 0 } = props2;
       const isDragging = index === focusedIndex && dragging;
-      return normalize.element({
+      return normalize2.element({
         ...parts.draggingIndicator.attrs,
         role: "presentation",
         dir: prop("dir"),
@@ -528,19 +528,32 @@ function connect(service, normalize) {
 var isEqualSize = (a, b) => {
   return a?.width === b?.width && a?.height === b?.height;
 };
+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);
+  });
+};
 var machine = createMachine({
   props({ props: props2 }) {
+    const min = props2.min ?? 0;
+    const max = props2.max ?? 100;
+    const step = props2.step ?? 1;
+    const defaultValue = props2.defaultValue ?? [min];
+    const minStepsBetweenThumbs = props2.minStepsBetweenThumbs ?? 0;
     return {
       dir: "ltr",
       thumbAlignment: "contain",
-      min: 0,
-      max: 100,
-      step: 1,
-      defaultValue: [0],
       origin: "start",
       orientation: "horizontal",
-      minStepsBetweenThumbs: 0,
-      ...props2
+      minStepsBetweenThumbs,
+      ...props2,
+      defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
+      value: props2.value ? normalize(props2.value, min, max, step, minStepsBetweenThumbs) : void 0,
+      max,
+      step,
+      min
     };
   },
   initialState() {

package/package.json

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