@zag-js/slider 0.2.7 → 0.2.8

package/dist/slider.machine.js

@@ -94,25 +94,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
@@ -337,6 +319,9 @@ function trackPointerMove(doc, opts) {
   );
 }
 
+// src/slider.machine.ts
+var import_element_size = require("@zag-js/element-size");
+
 // ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
   var _a;
@@ -400,108 +385,59 @@ function trackFormControl(el, options) {
 }
 
 // src/slider.machine.ts
-var import_element_size = require("@zag-js/element-size");
+var import_numeric_range4 = require("@zag-js/numeric-range");
 
-// ../../utilities/number/src/number.ts
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (t != null ? t : 10);
-  num = Math.round(num * p) / p;
-  return t ? num.toFixed(t) : v.toString();
-}
-var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
-var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
-function clamp(v, o) {
-  return Math.min(Math.max(valueOf(v), o.min), o.max);
-}
-function countDecimals(value) {
-  if (!Number.isFinite(value))
-    return 0;
-  let e = 1, p = 0;
-  while (Math.round(value * e) / e !== value) {
-    e *= 10;
-    p += 1;
-  }
-  return p;
-}
-var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
-var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
-function snapToStep(value, step) {
-  const num = valueOf(value);
-  const p = countDecimals(step);
-  const v = Math.round(num / step) * step;
-  return round(v, p);
-}
-function valueOf(v) {
-  if (typeof v === "number")
-    return v;
-  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
-  return !Number.isNaN(num) ? num : 0;
-}
-function decimalOperation(a, op, b) {
-  let result = op === "+" ? a + b : a - b;
-  if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
-    a = Math.round(a * multiplier);
-    b = Math.round(b * multiplier);
-    result = op === "+" ? a + b : a - b;
-    result /= multiplier;
-  }
-  return result;
-}
-
-// ../../utilities/number/src/transform.ts
-var transform = (a, b) => {
-  const i = { min: a[0], max: a[1] };
-  const o = { min: b[0], max: b[1] };
-  return (v) => {
-    if (i.min === i.max || o.min === o.max)
-      return o.min;
-    const ratio = (o.max - o.min) / (i.max - i.min);
-    return o.min + ratio * (v - i.min);
-  };
-};
+// src/slider.dom.ts
+var import_numeric_range2 = require("@zag-js/numeric-range");
 
 // src/slider.style.ts
+var import_numeric_range = require("@zag-js/numeric-range");
 function getVerticalThumbOffset(ctx) {
   var _a;
   const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
-  const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
+  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
 function getHorizontalThumbOffset(ctx) {
   var _a;
   const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
   if (ctx.isRtl) {
-    const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
   }
-  const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 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 = valueToPercent(ctx.value, ctx);
-  if (ctx.thumbAlignment === "center")
+  const percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
+  if (ctx.thumbAlignment === "center") {
     return `${percent}%`;
+  }
   const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
   return `calc(${percent}% - ${offset}px)`;
 }
+function getVisibility(ctx) {
+  let visibility = "visible";
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden";
+  }
+  return visibility;
+}
 function getThumbStyle(ctx) {
   const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
   return {
-    visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
+    visibility: getVisibility(ctx),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
     [placementProp]: "var(--slider-thumb-offset)"
   };
 }
 function getRangeOffsets(ctx) {
-  const percent = valueToPercent(ctx.value, ctx);
   let start = "0%";
-  let end = `${100 - percent}%`;
+  let end = `${100 - ctx.valuePercent}%`;
   if (ctx.origin === "center") {
-    const isNegative = percent < 50;
-    start = isNegative ? `${percent}%` : "50%";
+    const isNegative = ctx.valuePercent < 50;
+    start = isNegative ? `${ctx.valuePercent}%` : "50%";
     end = isNegative ? "50%" : end;
   }
   return { start, end };
@@ -540,7 +476,7 @@ function getMarkerStyle(ctx, percent) {
   return {
     position: "absolute",
     pointerEvents: "none",
-    [ctx.isHorizontal ? "left" : "bottom"]: `${ctx.isRtl ? 100 - percent : percent}%`
+    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
   };
 }
 function getLabelStyle() {
@@ -568,28 +504,6 @@ var styles = {
   getMarkerGroupStyle
 };
 
-// src/slider.utils.ts
-var utils = {
-  fromPercent(ctx, percent) {
-    percent = clamp(percent, { min: 0, max: 1 });
-    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
-  },
-  clamp(ctx, value) {
-    return clamp(value, ctx);
-  },
-  convert(ctx, value) {
-    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
-  },
-  decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  },
-  increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  }
-};
-
 // src/slider.dom.ts
 var dom = defineDomHelpers({
   ...styles,
@@ -640,7 +554,7 @@ var dom = defineDomHelpers({
     } else {
       percent = 1 - percentY;
     }
-    return utils.fromPercent(ctx, percent);
+    return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {
     const input = dom.getHiddenInputEl(ctx);
@@ -650,6 +564,31 @@ var dom = defineDomHelpers({
   }
 });
 
+// src/slider.utils.ts
+var import_numeric_range3 = require("@zag-js/numeric-range");
+function constrainValue(ctx, value) {
+  const snapValue = (0, import_numeric_range3.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
+  return (0, import_numeric_range3.clampValue)(snapValue, ctx.min, ctx.max);
+}
+function decrement(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range3.getPreviousStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+function increment(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range3.getNextStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+
 // src/slider.machine.ts
 function machine(userContext) {
   const ctx = compact(userContext);
@@ -677,7 +616,8 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
         isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
-        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
+        valuePercent: (ctx2) => 100 * (0, import_numeric_range4.getValuePercent)(ctx2.value, ctx2.min, ctx2.max)
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
@@ -804,7 +744,7 @@ function machine(userContext) {
       },
       actions: {
         checkValue(ctx2) {
-          const value = utils.convert(ctx2, ctx2.value);
+          const value = constrainValue(ctx2, ctx2.value);
           ctx2.value = value;
           ctx2.initialValue = value;
         },
@@ -827,7 +767,7 @@ function machine(userContext) {
           const value = dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)
             return;
-          ctx2.value = utils.clamp(ctx2, value);
+          ctx2.value = (0, import_numeric_range4.clampValue)(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
           raf(() => {
@@ -836,10 +776,10 @@ function machine(userContext) {
           });
         },
         decrement(ctx2, evt) {
-          ctx2.value = utils.decrement(ctx2, evt.step);
+          ctx2.value = decrement(ctx2, evt.step);
         },
         increment(ctx2, evt) {
-          ctx2.value = utils.increment(ctx2, evt.step);
+          ctx2.value = increment(ctx2, evt.step);
         },
         setToMin(ctx2) {
           ctx2.value = ctx2.min;
@@ -848,7 +788,7 @@ function machine(userContext) {
           ctx2.value = ctx2.max;
         },
         setValue(ctx2, evt) {
-          ctx2.value = utils.convert(ctx2, evt.value);
+          ctx2.value = constrainValue(ctx2, evt.value);
         }
       }
     }

package/dist/slider.machine.mjs

@@ -1,11 +1,10 @@
 import {
   machine
-} from "./chunk-3JMGYHB3.mjs";
+} from "./chunk-A2ZK6G4F.mjs";
 import "./chunk-SGCWELVB.mjs";
-import "./chunk-MR2MUD77.mjs";
-import "./chunk-MXJ3RGFD.mjs";
-import "./chunk-FUTBDWTA.mjs";
-import "./chunk-GBYBRQZL.mjs";
+import "./chunk-J5IGGBVE.mjs";
+import "./chunk-YREEXXZP.mjs";
+import "./chunk-DRAPR6JV.mjs";
 export {
   machine
 };

package/dist/slider.style.js

@@ -23,68 +23,53 @@ __export(slider_style_exports, {
   styles: () => styles
 });
 module.exports = __toCommonJS(slider_style_exports);
-
-// ../../utilities/number/src/number.ts
-var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
-function valueOf(v) {
-  if (typeof v === "number")
-    return v;
-  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
-  return !Number.isNaN(num) ? num : 0;
-}
-
-// ../../utilities/number/src/transform.ts
-var transform = (a, b) => {
-  const i = { min: a[0], max: a[1] };
-  const o = { min: b[0], max: b[1] };
-  return (v) => {
-    if (i.min === i.max || o.min === o.max)
-      return o.min;
-    const ratio = (o.max - o.min) / (i.max - i.min);
-    return o.min + ratio * (v - i.min);
-  };
-};
-
-// src/slider.style.ts
+var import_numeric_range = require("@zag-js/numeric-range");
 function getVerticalThumbOffset(ctx) {
   var _a;
   const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
-  const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
+  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
 function getHorizontalThumbOffset(ctx) {
   var _a;
   const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
   if (ctx.isRtl) {
-    const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
   }
-  const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 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 = valueToPercent(ctx.value, ctx);
-  if (ctx.thumbAlignment === "center")
+  const percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
+  if (ctx.thumbAlignment === "center") {
     return `${percent}%`;
+  }
   const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
   return `calc(${percent}% - ${offset}px)`;
 }
+function getVisibility(ctx) {
+  let visibility = "visible";
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden";
+  }
+  return visibility;
+}
 function getThumbStyle(ctx) {
   const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
   return {
-    visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
+    visibility: getVisibility(ctx),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
     [placementProp]: "var(--slider-thumb-offset)"
   };
 }
 function getRangeOffsets(ctx) {
-  const percent = valueToPercent(ctx.value, ctx);
   let start = "0%";
-  let end = `${100 - percent}%`;
+  let end = `${100 - ctx.valuePercent}%`;
   if (ctx.origin === "center") {
-    const isNegative = percent < 50;
-    start = isNegative ? `${percent}%` : "50%";
+    const isNegative = ctx.valuePercent < 50;
+    start = isNegative ? `${ctx.valuePercent}%` : "50%";
     end = isNegative ? "50%" : end;
   }
   return { start, end };
@@ -123,7 +108,7 @@ function getMarkerStyle(ctx, percent) {
   return {
     position: "absolute",
     pointerEvents: "none",
-    [ctx.isHorizontal ? "left" : "bottom"]: `${ctx.isRtl ? 100 - percent : percent}%`
+    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
   };
 }
 function getLabelStyle() {

package/dist/slider.style.mjs

@@ -1,7 +1,6 @@
 import {
   styles
-} from "./chunk-MXJ3RGFD.mjs";
-import "./chunk-GBYBRQZL.mjs";
+} from "./chunk-YREEXXZP.mjs";
 export {
   styles
 };

package/dist/slider.types.d.ts

@@ -128,6 +128,11 @@ type ComputedContext = Readonly<{
      * Whether the slider is in RTL mode
      */
     readonly isRtl: boolean;
+    /**
+     * @computed
+     * The value of the slider as a percentage
+     */
+    readonly valuePercent: number;
 }>;
 type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & ComputedContext & PrivateContext;

package/dist/slider.utils.d.ts

@@ -2,12 +2,9 @@ import { MachineContext } from './slider.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
 
-declare const utils: {
-    fromPercent(ctx: MachineContext, percent: number): number;
-    clamp(ctx: MachineContext, value: number): number;
-    convert(ctx: MachineContext, value: number): number;
-    decrement(ctx: MachineContext, step?: number): number;
-    increment(ctx: MachineContext, step?: number): number;
-};
+declare function clampPercent(percent: number): number;
+declare function constrainValue(ctx: MachineContext, value: number): number;
+declare function decrement(ctx: MachineContext, step?: number): number;
+declare function increment(ctx: MachineContext, step?: number): number;
 
-export { utils };
+export { clampPercent, constrainValue, decrement, increment };

package/dist/slider.utils.js

@@ -20,79 +20,42 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/slider.utils.ts
 var slider_utils_exports = {};
 __export(slider_utils_exports, {
-  utils: () => utils
+  clampPercent: () => clampPercent,
+  constrainValue: () => constrainValue,
+  decrement: () => decrement,
+  increment: () => increment
 });
 module.exports = __toCommonJS(slider_utils_exports);
-
-// ../../utilities/number/src/number.ts
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (t != null ? t : 10);
-  num = Math.round(num * p) / p;
-  return t ? num.toFixed(t) : v.toString();
-}
-var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
-function clamp(v, o) {
-  return Math.min(Math.max(valueOf(v), o.min), o.max);
+var import_numeric_range = require("@zag-js/numeric-range");
+function clampPercent(percent) {
+  return (0, import_numeric_range.clampValue)(percent, 0, 1);
 }
-function countDecimals(value) {
-  if (!Number.isFinite(value))
-    return 0;
-  let e = 1, p = 0;
-  while (Math.round(value * e) / e !== value) {
-    e *= 10;
-    p += 1;
-  }
-  return p;
+function constrainValue(ctx, value) {
+  const snapValue = (0, import_numeric_range.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
+  return (0, import_numeric_range.clampValue)(snapValue, ctx.min, ctx.max);
 }
-var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
-var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
-function snapToStep(value, step) {
-  const num = valueOf(value);
-  const p = countDecimals(step);
-  const v = Math.round(num / step) * step;
-  return round(v, p);
+function decrement(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range.getPreviousStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
 }
-function valueOf(v) {
-  if (typeof v === "number")
-    return v;
-  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
-  return !Number.isNaN(num) ? num : 0;
-}
-function decimalOperation(a, op, b) {
-  let result = op === "+" ? a + b : a - b;
-  if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
-    a = Math.round(a * multiplier);
-    b = Math.round(b * multiplier);
-    result = op === "+" ? a + b : a - b;
-    result /= multiplier;
-  }
-  return result;
+function increment(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range.getNextStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
 }
-
-// src/slider.utils.ts
-var utils = {
-  fromPercent(ctx, percent) {
-    percent = clamp(percent, { min: 0, max: 1 });
-    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
-  },
-  clamp(ctx, value) {
-    return clamp(value, ctx);
-  },
-  convert(ctx, value) {
-    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
-  },
-  decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  },
-  increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  }
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  utils
+  clampPercent,
+  constrainValue,
+  decrement,
+  increment
 });

package/dist/slider.utils.mjs

@@ -1,7 +1,12 @@
 import {
-  utils
-} from "./chunk-FUTBDWTA.mjs";
-import "./chunk-GBYBRQZL.mjs";
+  clampPercent,
+  constrainValue,
+  decrement,
+  increment
+} from "./chunk-DRAPR6JV.mjs";
 export {
-  utils
+  clampPercent,
+  constrainValue,
+  decrement,
+  increment
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,16 +27,16 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.3",
-    "@zag-js/core": "0.2.4",
+    "@zag-js/core": "0.2.5",
     "@zag-js/element-size": "0.3.1",
-    "@zag-js/types": "0.3.2"
+    "@zag-js/numeric-range": "0.1.0",
+    "@zag-js/types": "0.3.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.2",
+    "@zag-js/dom-utils": "0.2.3",
     "@zag-js/form-utils": "0.2.3",
-    "@zag-js/utils": "0.3.2",
-    "@zag-js/number-utils": "0.2.2"
+    "@zag-js/utils": "0.3.2"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-FUTBDWTA.mjs

@@ -1,33 +0,0 @@
-import {
-  clamp,
-  decrement,
-  increment,
-  percentToValue,
-  snapToStep
-} from "./chunk-GBYBRQZL.mjs";
-
-// src/slider.utils.ts
-var utils = {
-  fromPercent(ctx, percent) {
-    percent = clamp(percent, { min: 0, max: 1 });
-    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
-  },
-  clamp(ctx, value) {
-    return clamp(value, ctx);
-  },
-  convert(ctx, value) {
-    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
-  },
-  decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  },
-  increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  }
-};
-
-export {
-  utils
-};