@flexilla/custom-range - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

dist/custom-range.js

 var l = Object.defineProperty;
-var c = (a, t, e) => t in a ? l(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var n = (a, t, e) => c(a, typeof t != "symbol" ? t + "" : t, e);
+var d = (a, e, t) => e in a ? l(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var n = (a, e, t) => d(a, typeof e != "symbol" ? e + "" : e, t);
 const i = class i {
-  constructor(t, e) {
+  /**
+   * Create a new instance of the CustomRangeIndicator
+   * @param containerElement_ {string | HTMLElement} the container element that wraps the input range
+   * @param rangeIndicator {string} the class name of the
+   */
+  constructor(e, t) {
     n(this, "rangeContainer");
@@ -11,14 +16,15 @@ n(this, "rangeElement");
     n(this, "updateIndicatorSize", () => {
+      let e = "0%";
       const t = (parseFloat(this.rangeElement.value) - parseFloat(this.rangeElement.min)) / (parseFloat(this.rangeElement.max) - parseFloat(this.rangeElement.min)) * 100;
-      this.indicatorElement.style.width = `${Math.min(Math.max(t + 20, 20), 100)}%`, this.indicatorElement.style.left = `calc(${t}% - 10px)`;
+      t < 14 && t > 0 ? (e = `${t + 20 / 100}%`, console.log(e)) : e = `${t}%`, this.indicatorElement.style.width = `${e}`;
     });
     var r;
-    const s = typeof t == "string" ? document.querySelector(t) : t;
-    if (!(s instanceof HTMLElement)) throw new Error("No valid container element");
+    const s = typeof e == "string" ? document.querySelector(`${e}`) : e;
+    if (!(s instanceof HTMLElement)) throw new Error("No valide container element");
     if (this.rangeContainer = s, this.rangeElement = this.rangeContainer.querySelector("[data-input-range]"), !(this.rangeElement instanceof HTMLInputElement)) throw new Error("The provided element doesn't have a valid HTMLInputElement. Make sure to add data-input-range to the input element");
-    this.indicatorClassname = (e == null ? void 0 : e.split(" ")) || ((r = this.rangeContainer.dataset.rangeIndicator) == null ? void 0 : r.split(" ")) || [], this.indicatorElement = this.initIndicator(), this.initRange(), this.updateIndicatorSize();
+    this.indicatorClassname = (t == null ? void 0 : t.split(" ")) || ((r = this.rangeContainer.dataset.rangeIndicator) == null ? void 0 : r.split(" ")) || [], this.indicatorElement = this.initIndicator(), this.initRange(), this.updateIndicatorSize();
   }
   initIndicator() {
-    const t = document.createElement("span");
-    return this.indicatorClassname.length > 0 && t.classList.add(...this.indicatorClassname), this.rangeContainer.append(t), t;
+    const e = document.createElement("span");
+    return e.style.position = "absolute", e.style.pointerEvents = "none", this.indicatorClassname.length > 0 && (e.classList.add(...this.indicatorClassname), this.rangeContainer.append(e)), e;
   }
@@ -29,6 +35,15 @@ initRange() {
 };
-n(i, "autoInit", (t = "[data-fx-custom-range]") => {
-  const e = Array.from(document.querySelectorAll(t));
-  for (const s of e) new i(s);
-}), n(i, "init", (t, e) => new i(t, e));
+/**
+ * auto init the Custom Input Range based on the selector provided
+ * @param selector {string} default is [data-fx-custom-range]
+ */
+n(i, "autoInit", (e = "[data-fx-custom-range]") => {
+  const t = Array.from(document.querySelectorAll(e));
+  for (const s of t) new i(s);
+}), /**
+ * Initialize the Custom Input Range
+ * @param containerElement_ {string | HTMLElement} the container element that wraps the input range
+ * @param rangeIndicator {string} the class name of the
+ */
+n(i, "init", (e, t) => new i(e, t));
 let o = i;
@@ -35,0 +50,0 @@ export {

dist/index.d.ts

@@ -6,2 +6,7 @@ export declare class CustomRange {
     private indicatorClassname;
+    /**
+     * Create a new instance of the CustomRangeIndicator
+     * @param containerElement_ {string | HTMLElement} the container element that wraps the input range
+     * @param rangeIndicator {string} the class name of the
+     */
     constructor(containerElement_: string | HTMLElement, rangeIndicator?: string);
@@ -11,3 +16,12 @@ private initIndicator;
     private initRange;
+    /**
+     * auto init the Custom Input Range based on the selector provided
+     * @param selector {string} default is [data-fx-custom-range]
+     */
     static autoInit: (selector?: string) => void;
+    /**
+     * Initialize the Custom Input Range
+     * @param containerElement_ {string | HTMLElement} the container element that wraps the input range
+     * @param rangeIndicator {string} the class name of the
+     */
     static init: (containerElement_: string | HTMLElement, rangeIndicator?: string) => CustomRange;
@@ -14,0 +28,0 @@ }

package.json

 {
   "name": "@flexilla/custom-range",
   "private": false,
-  "version": "2.0.5",
+  "version": "2.0.6",
   "type": "module",
@@ -38,7 +38,5 @@ "description": "A lightweight JavaScript component to add range indicator to a custom range component",
     "build": "tsc && vite build",
-    "preview": "vite preview",
-    "format": "biome format --write ./src"
+    "preview": "vite preview"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.5.1",
     "typescript": "^5.2.2",
@@ -65,4 +63,3 @@ "vite": "^5.0.8",
   "license": "MIT",
-  "author": "johnkat-mj",
-  "gitHead": "645c56a48c9495587cd958f6bf6285291f1d485c"
+  "author": "johnkat-mj"
 }

No alert changes

Improved metrics

Total package byte prevSize

9200

increased by14.66%

Dev dependency count

3

decreased by-25%

Lines of code

90

increased by47.54%

No dependency changes