feat: add origin end to slider

Author: danieledler

.changeset/sixty-sides-fail.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/slider": minor
+---
+
+Add `end` to slider `origin` property.

packages/machines/slider/src/slider.style.ts

@@ -27,6 +27,9 @@ export function getRangeOffsets(params: Pick<Ctx, "prop" | "computed">) {
       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}%` }
   }

packages/machines/slider/src/slider.types.ts

@@ -119,13 +119,15 @@ export 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.

shared/src/controls.ts

@@ -117,7 +117,7 @@ export const sliderControls = defineControls({
   orientation: { type: "select", options: ["horizontal", "vertical"] as const, defaultValue: "horizontal" },
   thumbAlignment: { type: "select", options: ["contain", "center"] as const, defaultValue: "contain" },
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
-  origin: { type: "select", options: ["center", "start"] as const, defaultValue: "start" },
+  origin: { type: "select", options: ["center", "start", "end"] as const, defaultValue: "start" },
   min: { type: "number", defaultValue: 0 },
   max: { type: "number", defaultValue: 100 },
   step: { type: "number", defaultValue: 1 },

website/data/components/slider.mdx

@@ -143,19 +143,30 @@ const service = useMachine(slider.machine, {
 
 ## Changing the start position
 
-By default, the slider's "zero position" is usually at the start position (left
-in LTR and right in RTL).
+By default, the slider's origin is at the `start` position (left
+in LTR and right in RTL). Change it by setting the `origin` property to these values:
 
-In scenarios where the value represents an offset (or relative value), it might
-be useful to change the "zero position" to center. To do this, pass the `origin`
-context property to `center`.
+- `start`: the track will be filled from start to the thumb (default).
+- `center`: the track will be filled from the center (50%) to the thumb.
+- `end`: the track will be filled from the thumb to the end.
+
+This applies to sliders with single values.
+
+In scenarios where the value represents an offset (or relative value) on a
+diverging scale, it might be useful to change the origin to center. To do this, 
+set the `origin` context property to `center`.
 
 ```jsx {2}
 const service = useMachine(slider.machine, {
   origin: "center",
 })
 ```
 
+In scenarios where the slider value is used as a threshold to include values above it, 
+it might make more sense to set the `origin` to `end` to have the track filled from the 
+thumb to the end.
+
+
 ## Changing the thumb alignment
 
 By default, the thumb is aligned to the start of the track. Set the