@zag-js/slider 1.6.2 → 1.7.0

package/dist/index.d.mts

@@ -111,13 +111,15 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "vertical" | "horizontal" | undefined;
     /**
-     * The origin of the slider range
+     * The origin of the slider range. The track is filled from the origin
+     * to the thumb for single values.
      * - "start": Useful when the value represents an absolute value
      * - "center": Useful when the value represents an offset (relative)
+     * - "end": Useful when the value represents an offset from the end
      *
      * @default "start"
      */
-    origin?: "start" | "center" | undefined;
+    origin?: "start" | "center" | "end" | undefined;
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.

package/dist/index.d.ts

@@ -111,13 +111,15 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "vertical" | "horizontal" | undefined;
     /**
-     * The origin of the slider range
+     * The origin of the slider range. The track is filled from the origin
+     * to the thumb for single values.
      * - "start": Useful when the value represents an absolute value
      * - "center": Useful when the value represents an offset (relative)
+     * - "end": Useful when the value represents an offset from the end
      *
      * @default "start"
      */
-    origin?: "start" | "center" | undefined;
+    origin?: "start" | "center" | "end" | undefined;
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.

package/dist/index.js

@@ -71,6 +71,9 @@ function getRangeOffsets(params) {
       const end = isNegative ? "50%" : `${100 - valuePercent[0]}%`;
       return { start, end };
     }
+    if (prop("origin") === "end") {
+      return { start: `${lastPercent}%`, end: "0%" };
+    }
     return { start: "0%", end: `${100 - lastPercent}%` };
   }
   return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
@@ -151,12 +154,15 @@ function getRootStyle(params) {
   const isVertical = computed("isVertical");
   const isRtl = computed("isRtl");
   const range = getRangeOffsets(params);
+  const thumbSize = context.get("thumbSize");
   const offsetStyles = context.get("value").reduce((styles, value, index) => {
     const offset = getThumbOffset(params, value);
     return { ...styles, [`--slider-thumb-offset-${index}`]: offset };
   }, {});
   return {
     ...offsetStyles,
+    "--slider-thumb-width": utils.toPx(thumbSize?.width),
+    "--slider-thumb-height": utils.toPx(thumbSize?.height),
     "--slider-thumb-transform": isVertical ? "translateY(50%)" : isRtl ? "translateX(50%)" : "translateX(-50%)",
     "--slider-range-start": range.start,
     "--slider-range-end": range.end
@@ -709,7 +715,7 @@ var machine = core.createMachine({
         });
       },
       trackThumbsSize({ context, scope, prop }) {
-        if (prop("thumbAlignment") !== "contain" || context.get("thumbSize")) return;
+        if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
         return elementSize.trackElementsSize({
           getNodes: () => getElements(scope),
           observeMutation: true,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { raf, setElementValue, queryAll, trackPointerMove, trackFormControl, getRelativePoint, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
-import { setValueAtIndex, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, getClosestValueIndex, first, last, getValueTransformer } from '@zag-js/utils';
+import { setValueAtIndex, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, getClosestValueIndex, first, last, toPx, getValueTransformer } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
 import { trackElementsSize } from '@zag-js/element-size';
 import { createProps } from '@zag-js/types';
@@ -69,6 +69,9 @@ function getRangeOffsets(params) {
       const end = isNegative ? "50%" : `${100 - valuePercent[0]}%`;
       return { start, end };
     }
+    if (prop("origin") === "end") {
+      return { start: `${lastPercent}%`, end: "0%" };
+    }
     return { start: "0%", end: `${100 - lastPercent}%` };
   }
   return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
@@ -149,12 +152,15 @@ function getRootStyle(params) {
   const isVertical = computed("isVertical");
   const isRtl = computed("isRtl");
   const range = getRangeOffsets(params);
+  const thumbSize = context.get("thumbSize");
   const offsetStyles = context.get("value").reduce((styles, value, index) => {
     const offset = getThumbOffset(params, value);
     return { ...styles, [`--slider-thumb-offset-${index}`]: offset };
   }, {});
   return {
     ...offsetStyles,
+    "--slider-thumb-width": toPx(thumbSize?.width),
+    "--slider-thumb-height": toPx(thumbSize?.height),
     "--slider-thumb-transform": isVertical ? "translateY(50%)" : isRtl ? "translateX(50%)" : "translateX(-50%)",
     "--slider-range-start": range.start,
     "--slider-range-end": range.end
@@ -707,7 +713,7 @@ var machine = createMachine({
         });
       },
       trackThumbsSize({ context, scope, prop }) {
-        if (prop("thumbAlignment") !== "contain" || context.get("thumbSize")) return;
+        if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
         return trackElementsSize({
           getNodes: () => getElements(scope),
           observeMutation: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "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.6.2",
-    "@zag-js/core": "1.6.2",
-    "@zag-js/dom-query": "1.6.2",
-    "@zag-js/utils": "1.6.2",
-    "@zag-js/element-size": "1.6.2",
-    "@zag-js/types": "1.6.2"
+    "@zag-js/anatomy": "1.7.0",
+    "@zag-js/core": "1.7.0",
+    "@zag-js/dom-query": "1.7.0",
+    "@zag-js/utils": "1.7.0",
+    "@zag-js/element-size": "1.7.0",
+    "@zag-js/types": "1.7.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"