@zag-js/slider 0.15.0 → 0.17.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import * as _zag_js_types from '@zag-js/types';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -106,60 +106,13 @@ type PublicContext = DirectionProperty & CommonProperties & {
      * - `contain`: the thumb will be contained within the bounds of the track.
      */
     thumbAlignment?: "contain" | "center";
-};
-type PublicApi<T extends PropTypes = PropTypes> = {
-    /**
-     * Whether the slider is focused.
-     */
-    isFocused: boolean;
-    /**
-     * Whether the slider is being dragged.
-     */
-    isDragging: boolean;
-    /**
-     * The value of the slider.
-     */
-    value: number;
-    /**
-     * The value of the slider as a percent.
-     */
-    percent: number;
-    /**
-     * Function to set the value of the slider.
-     */
-    setValue(value: number): void;
-    /**
-     * Returns the value of the slider at the given percent.
-     */
-    getPercentValue: (percent: number) => number;
-    /**
-     * Returns the percent of the slider at the given value.
-     */
-    getValuePercent: (value: number) => number;
     /**
-     * Function to focus the slider.
-     */
-    focus(): void;
-    /**
-     * Function to increment the value of the slider by the step.
+     * The slider thumb dimensions.If not provided, the thumb size will be measured automatically.
      */
-    increment(): void;
-    /**
-     * Function to decrement the value of the slider by the step.
-     */
-    decrement(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    thumbProps: T["element"];
-    hiddenInputProps: T["input"];
-    outputProps: T["output"];
-    trackProps: T["element"];
-    rangeProps: T["element"];
-    controlProps: T["element"];
-    markerGroupProps: T["element"];
-    getMarkerProps({ value }: {
-        value: number;
-    }): T["element"];
+    thumbSize: {
+        width: number;
+        height: number;
+    } | null;
 };
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
@@ -167,32 +120,37 @@ type ComputedContext = Readonly<{
      * @computed
      * Whether the slider is interactive
      */
-    readonly isInteractive: boolean;
+    isInteractive: boolean;
     /**
      * @computed
      * Whether the thumb size has been measured
      */
-    readonly hasMeasuredThumbSize: boolean;
+    hasMeasuredThumbSize: boolean;
     /**
      * @computed
      * Whether the slider is horizontal
      */
-    readonly isHorizontal: boolean;
+    isHorizontal: boolean;
     /**
      * @computed
      * Whether the slider is vertical
      */
-    readonly isVertical: boolean;
+    isVertical: boolean;
     /**
      * @computed
      * Whether the slider is in RTL mode
      */
-    readonly isRtl: boolean;
+    isRtl: boolean;
     /**
      * @computed
      * The value of the slider as a percentage
      */
-    readonly valuePercent: number;
+    valuePercent: number;
+    /**
+     * @computed
+     * Whether the slider is disabled
+     */
+    isDisabled: boolean;
 }>;
 type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & ComputedContext & PrivateContext;
@@ -222,8 +180,62 @@ type Point = {
     x: number;
     y: number;
 };
+type MachineApi<T extends PropTypes = PropTypes> = {
+    /**
+     * Whether the slider is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the slider is being dragged.
+     */
+    isDragging: boolean;
+    /**
+     * The value of the slider.
+     */
+    value: number;
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: number;
+    /**
+     * Function to set the value of the slider.
+     */
+    setValue(value: number): void;
+    /**
+     * Returns the value of the slider at the given percent.
+     */
+    getPercentValue: (percent: number) => number;
+    /**
+     * Returns the percent of the slider at the given value.
+     */
+    getValuePercent: (value: number) => number;
+    /**
+     * Function to focus the slider.
+     */
+    focus(): void;
+    /**
+     * Function to increment the value of the slider by the step.
+     */
+    increment(): void;
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
+    decrement(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    thumbProps: T["element"];
+    hiddenInputProps: T["input"];
+    outputProps: T["output"];
+    trackProps: T["element"];
+    rangeProps: T["element"];
+    controlProps: T["element"];
+    markerGroupProps: T["element"];
+    getMarkerProps({ value }: {
+        value: number;
+    }): T["element"];
+};
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare const dom: {
     getRootNode: (ctx: {
@@ -241,6 +253,9 @@ declare const dom: {
     getById: <T extends HTMLElement = HTMLElement>(ctx: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T | null;
+    setValue: <T_1 extends {
+        value: string;
+    }>(elem: T_1 | null, value: string | number | null | undefined) => void;
 } & {
     getRootId: (ctx: MachineContext) => string;
     getThumbId: (ctx: MachineContext) => string;
@@ -262,7 +277,7 @@ declare const dom: {
     getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
     getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
     getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => _zag_js_types.JSX.CSSProperties;
+    getMarkerStyle: (ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredThumbSize" | "isHorizontal" | "isRtl">, value: number) => _zag_js_types.JSX.CSSProperties;
     getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
     getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
     getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
@@ -270,4 +285,4 @@ declare const dom: {
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine, dom as unstable__dom };
+export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine, dom as unstable__dom };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import * as _zag_js_types from '@zag-js/types';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -106,60 +106,13 @@ type PublicContext = DirectionProperty & CommonProperties & {
      * - `contain`: the thumb will be contained within the bounds of the track.
      */
     thumbAlignment?: "contain" | "center";
-};
-type PublicApi<T extends PropTypes = PropTypes> = {
-    /**
-     * Whether the slider is focused.
-     */
-    isFocused: boolean;
-    /**
-     * Whether the slider is being dragged.
-     */
-    isDragging: boolean;
-    /**
-     * The value of the slider.
-     */
-    value: number;
-    /**
-     * The value of the slider as a percent.
-     */
-    percent: number;
-    /**
-     * Function to set the value of the slider.
-     */
-    setValue(value: number): void;
-    /**
-     * Returns the value of the slider at the given percent.
-     */
-    getPercentValue: (percent: number) => number;
-    /**
-     * Returns the percent of the slider at the given value.
-     */
-    getValuePercent: (value: number) => number;
     /**
-     * Function to focus the slider.
-     */
-    focus(): void;
-    /**
-     * Function to increment the value of the slider by the step.
+     * The slider thumb dimensions.If not provided, the thumb size will be measured automatically.
      */
-    increment(): void;
-    /**
-     * Function to decrement the value of the slider by the step.
-     */
-    decrement(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    thumbProps: T["element"];
-    hiddenInputProps: T["input"];
-    outputProps: T["output"];
-    trackProps: T["element"];
-    rangeProps: T["element"];
-    controlProps: T["element"];
-    markerGroupProps: T["element"];
-    getMarkerProps({ value }: {
-        value: number;
-    }): T["element"];
+    thumbSize: {
+        width: number;
+        height: number;
+    } | null;
 };
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
@@ -167,32 +120,37 @@ type ComputedContext = Readonly<{
      * @computed
      * Whether the slider is interactive
      */
-    readonly isInteractive: boolean;
+    isInteractive: boolean;
     /**
      * @computed
      * Whether the thumb size has been measured
      */
-    readonly hasMeasuredThumbSize: boolean;
+    hasMeasuredThumbSize: boolean;
     /**
      * @computed
      * Whether the slider is horizontal
      */
-    readonly isHorizontal: boolean;
+    isHorizontal: boolean;
     /**
      * @computed
      * Whether the slider is vertical
      */
-    readonly isVertical: boolean;
+    isVertical: boolean;
     /**
      * @computed
      * Whether the slider is in RTL mode
      */
-    readonly isRtl: boolean;
+    isRtl: boolean;
     /**
      * @computed
      * The value of the slider as a percentage
      */
-    readonly valuePercent: number;
+    valuePercent: number;
+    /**
+     * @computed
+     * Whether the slider is disabled
+     */
+    isDisabled: boolean;
 }>;
 type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & ComputedContext & PrivateContext;
@@ -222,8 +180,62 @@ type Point = {
     x: number;
     y: number;
 };
+type MachineApi<T extends PropTypes = PropTypes> = {
+    /**
+     * Whether the slider is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the slider is being dragged.
+     */
+    isDragging: boolean;
+    /**
+     * The value of the slider.
+     */
+    value: number;
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: number;
+    /**
+     * Function to set the value of the slider.
+     */
+    setValue(value: number): void;
+    /**
+     * Returns the value of the slider at the given percent.
+     */
+    getPercentValue: (percent: number) => number;
+    /**
+     * Returns the percent of the slider at the given value.
+     */
+    getValuePercent: (value: number) => number;
+    /**
+     * Function to focus the slider.
+     */
+    focus(): void;
+    /**
+     * Function to increment the value of the slider by the step.
+     */
+    increment(): void;
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
+    decrement(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    thumbProps: T["element"];
+    hiddenInputProps: T["input"];
+    outputProps: T["output"];
+    trackProps: T["element"];
+    rangeProps: T["element"];
+    controlProps: T["element"];
+    markerGroupProps: T["element"];
+    getMarkerProps({ value }: {
+        value: number;
+    }): T["element"];
+};
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare const dom: {
     getRootNode: (ctx: {
@@ -241,6 +253,9 @@ declare const dom: {
     getById: <T extends HTMLElement = HTMLElement>(ctx: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T | null;
+    setValue: <T_1 extends {
+        value: string;
+    }>(elem: T_1 | null, value: string | number | null | undefined) => void;
 } & {
     getRootId: (ctx: MachineContext) => string;
     getThumbId: (ctx: MachineContext) => string;
@@ -262,7 +277,7 @@ declare const dom: {
     getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
     getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
     getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => _zag_js_types.JSX.CSSProperties;
+    getMarkerStyle: (ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredThumbSize" | "isHorizontal" | "isRtl">, value: number) => _zag_js_types.JSX.CSSProperties;
     getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
     getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
     getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
@@ -270,4 +285,4 @@ declare const dom: {
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine, dom as unstable__dom };
+export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine, dom as unstable__dom };

package/dist/index.js

@@ -63,20 +63,22 @@ function getVerticalThumbOffset(ctx) {
 function getHorizontalThumbOffset(ctx) {
   const { width = 0 } = ctx.thumbSize ?? {};
   if (ctx.isRtl) {
-    const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width / 2, width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
   }
   const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-width / 2, width / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
-function getThumbOffset(ctx) {
-  const percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
-  if (ctx.thumbAlignment === "center") {
+function getOffset(ctx, percent) {
+  if (ctx.thumbAlignment === "center")
     return `${percent}%`;
-  }
   const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
   return `calc(${percent}% - ${offset}px)`;
 }
+function getThumbOffset(ctx) {
+  let percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
+  return getOffset(ctx, percent);
+}
 function getVisibility(ctx) {
   let visibility = "visible";
   if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
@@ -85,7 +87,7 @@ function getVisibility(ctx) {
   return visibility;
 }
 function getThumbStyle(ctx) {
-  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart";
   return {
     visibility: getVisibility(ctx),
     position: "absolute",
@@ -127,17 +129,22 @@ function getControlStyle() {
 function getRootStyle(ctx) {
   const range = getRangeOffsets(ctx);
   return {
-    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
+    "--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
   };
 }
-function getMarkerStyle(ctx, percent) {
+function getMarkerStyle(ctx, value) {
   return {
+    visibility: getVisibility(ctx),
     position: "absolute",
     pointerEvents: "none",
-    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
+    // @ts-expect-error
+    [ctx.isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset({ ...ctx, value }),
+    translate: "var(--tx) var(--ty)",
+    "--tx": ctx.isHorizontal ? ctx.isRtl ? "50%" : "-50%" : "0%",
+    "--ty": !ctx.isHorizontal ? "50%" : "0%"
   };
 }
 function getLabelStyle() {
@@ -208,7 +215,7 @@ function connect(state, send, normalize) {
   const ariaValueText = state.context.getAriaValueText?.(state.context.value);
   const isFocused = state.matches("focus");
   const isDragging = state.matches("dragging");
-  const isDisabled = state.context.disabled;
+  const isDisabled = state.context.isDisabled;
   const isInteractive = state.context.isInteractive;
   const isInvalid = state.context.invalid;
   function getPercentValueFn(percent) {
@@ -283,6 +290,10 @@ function connect(state, send, normalize) {
       "aria-valuetext": ariaValueText,
       role: "slider",
       tabIndex: isDisabled ? void 0 : 0,
+      onPointerDown(event) {
+        send({ type: "THUMB_POINTER_DOWN" });
+        event.stopPropagation();
+      },
       onBlur() {
         if (!isInteractive)
           return;
@@ -340,7 +351,6 @@ function connect(state, send, normalize) {
       style: dom.getThumbStyle(state.context)
     }),
     hiddenInputProps: normalize.input({
-      type: "text",
       defaultValue: state.context.value,
       name: state.context.name,
       form: state.context.form,
@@ -402,11 +412,11 @@ function connect(state, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = getValuePercentFn(value);
-      const style = dom.getMarkerStyle(state.context, percent);
-      const markerState = value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value";
+      const style = dom.getMarkerStyle(state.context, value);
+      const markerState = value > state.context.value ? "over-value" : value === state.context.value ? "at-value" : "under-value";
       return normalize.element({
         ...parts.marker.attrs,
+        dir: state.context.dir,
         id: dom.getMarkerId(state.context, value),
         role: "presentation",
         "data-orientation": state.context.orientation,
@@ -463,28 +473,29 @@ function machine(userContext) {
       context: {
         thumbSize: null,
         thumbAlignment: "contain",
-        disabled: false,
         threshold: 5,
         dir: "ltr",
         origin: "start",
         orientation: "horizontal",
-        initialValue: null,
         value: 0,
         step: 1,
         min: 0,
         max: 100,
-        ...ctx
+        disabled: false,
+        ...ctx,
+        fieldsetDisabled: false
       },
       computed: {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
+        isDisabled: (ctx2) => ctx2.disabled || ctx2.fieldsetDisabled,
+        isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
         hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
         valuePercent: (ctx2) => 100 * (0, import_numeric_range5.getValuePercent)(ctx2.value, ctx2.min, ctx2.max)
       },
       watch: {
-        value: ["invokeOnChange", "dispatchChangeEvent"]
+        value: ["syncInputElement"]
       },
       activities: ["trackFormControlState", "trackThumbSize"],
       on: {
@@ -506,7 +517,11 @@ function machine(userContext) {
               target: "dragging",
               actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
             },
-            FOCUS: "focus"
+            FOCUS: "focus",
+            THUMB_POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnChangeStart", "focusThumb"]
+            }
           }
         },
         focus: {
@@ -516,6 +531,10 @@ function machine(userContext) {
               target: "dragging",
               actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
             },
+            THUMB_POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnChangeStart", "focusThumb"]
+            },
             ARROW_LEFT: {
               guard: "isHorizontal",
               actions: "decrement"
@@ -568,15 +587,13 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.isVertical
       },
       activities: {
-        trackFormControlState(ctx2) {
+        trackFormControlState(ctx2, _evt, { initialContext }) {
           return (0, import_form_utils2.trackFormControl)(dom.getHiddenInputEl(ctx2), {
-            onFieldsetDisabled() {
-              ctx2.disabled = true;
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
             },
             onFormReset() {
-              if (ctx2.initialValue != null) {
-                ctx2.value = ctx2.initialValue;
-              }
+              set.value(ctx2, initialContext.value);
             }
           });
         },
@@ -591,7 +608,7 @@ function machine(userContext) {
           });
         },
         trackThumbSize(ctx2, _evt) {
-          if (ctx2.thumbAlignment !== "contain")
+          if (ctx2.thumbAlignment !== "contain" || ctx2.thumbSize)
             return;
           return (0, import_element_size.trackElementSize)(dom.getThumbEl(ctx2), (size) => {
             if (size)
@@ -601,9 +618,7 @@ function machine(userContext) {
       },
       actions: {
         checkValue(ctx2) {
-          const value = constrainValue(ctx2, ctx2.value);
-          ctx2.value = value;
-          ctx2.initialValue = value;
+          ctx2.value = constrainValue(ctx2, ctx2.value);
         },
         invokeOnChangeStart(ctx2) {
           ctx2.onChangeStart?.({ value: ctx2.value });
@@ -611,40 +626,53 @@ function machine(userContext) {
         invokeOnChangeEnd(ctx2) {
           ctx2.onChangeEnd?.({ value: ctx2.value });
         },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value });
-        },
-        dispatchChangeEvent(ctx2) {
-          dom.dispatchChangeEvent(ctx2);
-        },
         setPointerValue(ctx2, evt) {
           const value = dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)
             return;
-          ctx2.value = (0, import_numeric_range5.clampValue)(value, ctx2.min, ctx2.max);
+          set.value(ctx2, (0, import_numeric_range5.clampValue)(value, ctx2.min, ctx2.max));
         },
         focusThumb(ctx2) {
-          (0, import_dom_query3.raf)(() => dom.getThumbEl(ctx2)?.focus());
+          (0, import_dom_query3.raf)(() => dom.getThumbEl(ctx2)?.focus({ preventScroll: true }));
         },
         decrement(ctx2, evt) {
-          ctx2.value = decrement(ctx2, evt.step);
+          const value = decrement(ctx2, evt.step);
+          set.value(ctx2, value);
         },
         increment(ctx2, evt) {
-          ctx2.value = increment(ctx2, evt.step);
+          const value = increment(ctx2, evt.step);
+          set.value(ctx2, value);
         },
         setToMin(ctx2) {
-          ctx2.value = ctx2.min;
+          set.value(ctx2, ctx2.min);
         },
         setToMax(ctx2) {
-          ctx2.value = ctx2.max;
+          set.value(ctx2, ctx2.max);
         },
         setValue(ctx2, evt) {
-          ctx2.value = constrainValue(ctx2, evt.value);
+          const value = constrainValue(ctx2, evt.value);
+          set.value(ctx2, value);
+        },
+        syncInputElement(ctx2) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          dom.setValue(inputEl, ctx2.value);
         }
       }
     }
   );
 }
+var invoke = {
+  change: (ctx) => {
+    ctx.onChange?.({ value: ctx.value });
+    dom.dispatchChangeEvent(ctx);
+  }
+};
+var set = {
+  value: (ctx, value) => {
+    ctx.value = value;
+    invoke.change(ctx);
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   anatomy,