range-slider-element - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0-rc.0

dist/range-slider-element.js

@@ -1,9 +0,9 @@
-var W = Object.defineProperty;
-var B = (r) => {
-  throw TypeError(r);
+var J = Object.defineProperty;
+var j = (n) => {
+  throw TypeError(n);
 };
-var G = (r, a, t) => a in r ? W(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
-var $ = (r, a, t) => G(r, typeof a != "symbol" ? a + "" : a, t), D = (r, a, t) => a.has(r) || B("Cannot " + t);
-var e = (r, a, t) => (D(r, a, "read from private field"), t ? t.call(r) : a.get(r)), u = (r, a, t) => a.has(r) ? B("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t), E = (r, a, t, s) => (D(r, a, "write to private field"), s ? s.call(r, t) : a.set(r, t), t), o = (r, a, t) => (D(r, a, "access private method"), t);
-const J = {
+var Q = (n, r, t) => r in n ? J(n, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[r] = t;
+var N = (n, r, t) => Q(n, typeof r != "symbol" ? r + "" : r, t), D = (n, r, t) => r.has(n) || j("Cannot " + t);
+var e = (n, r, t) => (D(n, r, "read from private field"), t ? t.call(n) : r.get(n)), u = (n, r, t) => r.has(n) ? j("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, t), A = (n, r, t, s) => (D(n, r, "write to private field"), s ? s.call(n, t) : r.set(n, t), t), o = (n, r, t) => (D(n, r, "access private method"), t);
+const Z = {
   value: "valuenow",
@@ -13,15 +13,15 @@ min: "valuemin",
 };
-function Q(r = "") {
-  const a = String(r).split(".")[1];
-  return a ? a.length : 0;
+function _(n = "") {
+  const r = String(n).split(".")[1];
+  return r ? r.length : 0;
 }
-function x(r, a, t) {
-  const s = J[a];
-  s && r.setAttribute(`aria-${s}`, t);
+function x(n, r, t) {
+  const s = Z[r];
+  s && n.setAttribute(`aria-${s}`, t);
 }
-const Z = ["min", "max", "step", "value", "disabled", "value-precision"], _ = {
+const tt = ["min", "max", "step", "value", "disabled", "value-precision"], z = {
   stepUp: ["ArrowUp", "ArrowRight"],
   stepDown: ["ArrowDown", "ArrowLeft"]
-}, j = document.createElement("template");
-j.innerHTML = `
+}, K = document.createElement("template");
+K.innerHTML = `
   <div data-track></div>
@@ -33,4 +33,9 @@ <div data-track-fill></div>
 `;
-var c, y, h, v, l, i, m, I, H, d, S, V, L, M, T, g, N, C, z, O, R, K, k, Y, q;
-class p extends HTMLElement {
+var c, L, h, v, l, i, m, H, O, d, S, V, M, T, y, p, P, C, Y, U, R, q, k, X, W;
+const E = class E extends HTMLElement {
+  /**
+   * Creates a new instance of the RangeSliderElement.
+   *
+   * @constructor
+   */
   constructor() {
@@ -40,27 +45,27 @@ super();
     u(this, c);
-    u(this, y);
+    u(this, L);
     u(this, h, []);
     u(this, v, []);
     u(this, l, 0);
-    u(this, L, (t) => {
-      t.target.dataset.thumb !== void 0 && E(this, l, Number(t.target.dataset.thumb));
+    u(this, M, (t) => {
+      t.target.dataset.thumb !== void 0 && A(this, l, Number(t.target.dataset.thumb));
     });
-    u(this, M, (t) => {
+    u(this, T, (t) => {
       if (!this.disabled)
-        if (this.setPointerCapture(t.pointerId), this.addEventListener("pointermove", e(this, T)), window.addEventListener("pointerup", e(this, g)), window.addEventListener("pointercancel", e(this, g)), E(this, y, this.value), t.target.dataset.thumb !== void 0)
-          E(this, l, Number(t.target.dataset.thumb));
+        if (this.setPointerCapture(t.pointerId), this.addEventListener("pointermove", e(this, y)), window.addEventListener("pointerup", e(this, p)), window.addEventListener("pointercancel", e(this, p)), A(this, L, this.value), t.target.dataset.thumb !== void 0)
+          A(this, l, Number(t.target.dataset.thumb));
         else {
-          const { offsetX: s, offsetY: n } = t;
-          E(this, l, o(this, i, K).call(this, e(this, i, m) ? n : s)), e(this, C).call(this, e(this, i, m) ? n : s);
+          const { offsetX: s, offsetY: a } = t;
+          A(this, l, o(this, i, q).call(this, e(this, i, m) ? a : s)), e(this, C).call(this, e(this, i, m) ? a : s);
         }
     });
-    u(this, T, (t) => {
+    u(this, y, (t) => {
       t.target === this && (t.preventDefault(), e(this, C).call(this, e(this, i, m) ? t.offsetY : t.offsetX));
     });
-    u(this, g, (t) => {
-      this.releasePointerCapture(t.pointerId), this.removeEventListener("pointermove", e(this, T)), window.removeEventListener("pointerup", e(this, g)), window.removeEventListener("pointercancel", e(this, g)), e(this, y) !== this.value && this.dispatchEvent(new Event("change", { bubbles: !0 }));
+    u(this, p, (t) => {
+      this.releasePointerCapture(t.pointerId), this.removeEventListener("pointermove", e(this, y)), window.removeEventListener("pointerup", e(this, p)), window.removeEventListener("pointercancel", e(this, p)), e(this, L) !== this.value && this.dispatchEvent(new Event("change", { bubbles: !0 }));
     });
-    u(this, N, (t) => {
-      const n = Object.keys(_).find((b) => _[b].includes(t.code) && b);
-      document.activeElement !== e(this, i, d)[e(this, l)] && e(this, i, d)[e(this, l)].focus({ focusVisible: !1 }), n && (t.preventDefault(), this[n]());
+    u(this, P, (t) => {
+      const a = Object.keys(z).find((b) => z[b].includes(t.code) && b);
+      document.activeElement !== e(this, i, d)[e(this, l)] && e(this, i, d)[e(this, l)].focus({ focusVisible: !1 }), a && (t.preventDefault(), this[a]());
     });
@@ -72,7 +77,21 @@ /**
     u(this, C, (t) => {
-      const n = Math.min(Math.max(t, 0), e(this, i, V)) / e(this, i, V), b = o(this, i, R).call(this, e(this, i, I) ? 1 - n : n);
+      const a = Math.min(Math.max(t, 0), e(this, i, V)) / e(this, i, V), b = o(this, i, R).call(this, e(this, i, H) ? 1 - a : a);
       o(this, i, k).call(this, e(this, l), b, ["input"]);
     });
-    E(this, c, this.attachInternals()), this.addEventListener("focusin", e(this, L)), this.addEventListener("pointerdown", e(this, M)), this.addEventListener("keydown", e(this, N));
+    A(this, c, this.attachInternals()), this.addEventListener("focusin", e(this, M)), this.addEventListener("pointerdown", e(this, T)), this.addEventListener("keydown", e(this, P));
   }
+  /**
+   * Registers the custom element with the global or provided custom element registry.
+   *
+   * @param {string} [tagName='range-slider'] - The tag name to register the element under.
+   * @param {CustomElementRegistry} [registry=window.customElements] - Optional custom element registry.
+   * @returns {typeof RangeSliderElement | undefined} - Returns the class constructor if successfully defined, otherwise undefined.
+   * @example
+   * RangeSliderElement.define();
+   * RangeSliderElement.define('my-slider', customElements);
+   */
+  static define(t = "range-slider", s = customElements) {
+    if (!s.get(t))
+      return s.define(t, E), E;
+  }
   get min() {
@@ -110,4 +129,4 @@ return this.hasAttribute("min") ? Number(this.getAttribute("min")) : 0;
   set value(t) {
-    String(t).split(",").map((s, n) => {
-      o(this, i, k).call(this, n, s);
+    String(t).split(",").map((s, a) => {
+      o(this, i, k).call(this, a, s);
     });
@@ -160,15 +179,15 @@ }
   connectedCallback() {
-    this.firstChild || this.appendChild(j.content.cloneNode(!0)), this.disabled || this.setAttribute("tabindex", "-1"), e(this, i, d).forEach((t, s) => {
+    this.firstChild || this.appendChild(K.content.cloneNode(!0)), this.disabled || this.setAttribute("tabindex", "-1"), e(this, i, d).forEach((t, s) => {
       t.dataset.thumb = s, t.setAttribute("role", "slider"), x(t, "min", this.min), x(t, "max", this.max), this.disabled || t.setAttribute("tabindex", 0);
-    }), this.value = this.getAttribute("value") || o(this, i, z).call(this);
+    }), this.value = this.getAttribute("value") || o(this, i, Y).call(this);
   }
   disconnectedCallback() {
-    this.removeEventListener("focusin", e(this, L)), this.removeEventListener("pointerdown", e(this, M)), this.removeEventListener("keydown", e(this, N));
+    this.removeEventListener("focusin", e(this, M)), this.removeEventListener("pointerdown", e(this, T)), this.removeEventListener("keydown", e(this, P));
   }
-  attributeChangedCallback(t, s, n) {
-    s !== n && (t === "value" ? this.value = n : this.value = this.value);
+  attributeChangedCallback(t, s, a) {
+    s !== a && (t === "value" ? this.value = a : this.value = this.value);
   }
   /**
-   *
-   * @param {number} amount - Amount to step up
+   * Increments the value
+   * @param {number} amount - The amount to increment by.
    */
@@ -180,4 +199,4 @@ stepUp(t = this.step) {
   /**
-   *
-   * @param {number} amount - Amount to step down
+   * Decrements the value
+   * @param {number} amount - The amount to decrement by.
    */
@@ -188,8 +207,8 @@ stepDown(t = this.step) {
   }
-}
-c = new WeakMap(), y = new WeakMap(), h = new WeakMap(), v = new WeakMap(), l = new WeakMap(), i = new WeakSet(), m = function() {
+};
+c = new WeakMap(), L = new WeakMap(), h = new WeakMap(), v = new WeakMap(), l = new WeakMap(), i = new WeakSet(), m = function() {
   return this.getAttribute("orientation") === "vertical";
-}, I = function() {
+}, H = function() {
   return !!(e(this, i, m) || this.getAttribute("dir") === "rtl");
-}, H = function() {
+}, O = function() {
   return e(this, i, d).length > 1;
@@ -202,3 +221,3 @@ }, d = function() {
   return e(this, i, m) ? this.offsetHeight : this.offsetWidth;
-}, L = new WeakMap(), M = new WeakMap(), T = new WeakMap(), g = new WeakMap(), N = new WeakMap(), C = new WeakMap(), z = function() {
+}, M = new WeakMap(), T = new WeakMap(), y = new WeakMap(), p = new WeakMap(), P = new WeakMap(), C = new WeakMap(), Y = function() {
   return this.max < this.min ? this.min : this.min + (this.max - this.min) / 2;
@@ -210,3 +229,3 @@ }, /**
  */
-O = function(t) {
+U = function(t) {
   return 100 * (t - this.min) / (this.max - this.min);
@@ -227,5 +246,5 @@ }, /**
  */
-K = function(t) {
+q = function(t) {
   let s;
-  const b = Math.min(Math.max(t, 0), e(this, i, V)) / e(this, i, V), A = o(this, i, R).call(this, e(this, i, I) ? 1 - b : b), f = e(this, h).findIndex((w) => A - w < 0);
+  const b = Math.min(Math.max(t, 0), e(this, i, V)) / e(this, i, V), g = o(this, i, R).call(this, e(this, i, H) ? 1 - b : b), f = e(this, h).findIndex((w) => g - w < 0);
   if (f === 0)
@@ -237,3 +256,3 @@ s = f;
     const w = e(this, h)[f - 1], F = e(this, h)[f];
-    Math.abs(w - A) < Math.abs(F - A) ? s = f - 1 : s = f;
+    Math.abs(w - g) < Math.abs(F - g) ? s = f - 1 : s = f;
   }
@@ -247,8 +266,8 @@ return s;
  */
-k = function(t, s, n = []) {
-  const b = e(this, h)[t], A = Number(this.valuePrecision) || Q(this.step) || 0, f = e(this, h)[t - 1] || this.min, w = e(this, h)[t + 1] || this.max, F = Math.min(Math.max(s, f), w), U = Math.round(F / this.step) * this.step, P = Number(
-    A ? U.toFixed(A) : Math.round(U)
+k = function(t, s, a = []) {
+  const b = e(this, h)[t], g = Number(this.valuePrecision) || _(this.step) || 0, f = e(this, h)[t - 1] || this.min, w = e(this, h)[t + 1] || this.max, F = Math.min(Math.max(s, f), w), B = Math.round(F / this.step) * this.step, $ = Number(
+    g ? B.toFixed(g) : Math.round(B)
   );
-  b !== P && (e(this, h)[t] = P, e(this, v)[t] = o(this, i, O).call(this, P), e(this, c).setFormValue(e(this, h).join(",")), o(this, i, Y).call(this, t, P), o(this, i, q).call(this), n.map((X) => {
-    this.dispatchEvent(new Event(X, { bubbles: !0 }));
+  b !== $ && (e(this, h)[t] = $, e(this, v)[t] = o(this, i, U).call(this, $), e(this, c).setFormValue(e(this, h).join(",")), o(this, i, X).call(this, t, $), o(this, i, W).call(this), a.map((G) => {
+    this.dispatchEvent(new Event(G, { bubbles: !0 }));
   }));
@@ -260,18 +279,19 @@ }, /**
  */
-Y = function(t, s) {
+X = function(t, s) {
   e(this, i, d)[t] && (e(this, i, d)[t].style.setProperty(
     `inset-${e(this, i, m) ? "block" : "inline"}-${e(this, i, m) ? "end" : "start"}`,
-    `${o(this, i, O).call(this, s)}%`
+    `${o(this, i, U).call(this, s)}%`
   ), x(e(this, i, d)[t], "value", s));
-}, q = function() {
+}, W = function() {
   if (!e(this, i, S)) return;
-  const t = e(this, i, H) ? `${e(this, v)[0]}%` : 0, n = `clamp(var(--thumb-size) / 2, ${e(this, i, H) ? `${100 - e(this, v)[e(this, v).length - 1]}%` : `${100 - e(this, v)[0]}%`}, 100% - var(--thumb-size) / 2)`;
+  const t = e(this, i, O) ? `${e(this, v)[0]}%` : 0, a = `clamp(var(--thumb-size) / 2, ${e(this, i, O) ? `${100 - e(this, v)[e(this, v).length - 1]}%` : `${100 - e(this, v)[0]}%`}, 100% - var(--thumb-size) / 2)`;
   e(this, i, S).style.setProperty(
     `inset-${e(this, i, m) ? "block" : "inline"}`,
-    e(this, i, m) ? `${n} ${t}` : `${t} ${n}`
+    e(this, i, m) ? `${a} ${t}` : `${t} ${a}`
   );
-}, $(p, "tagName", "range-slider"), $(p, "observedAttributes", Z), $(p, "formAssociated", !0);
-window.customElements.get(p.tagName) || (window.RangeSliderElement = p, window.customElements.define(p.tagName, p));
+}, N(E, "observedAttributes", tt), N(E, "formAssociated", !0);
+let I = E;
+new URL(import.meta.url).searchParams.has("define", "false") || (window.RangeSliderElement = I.define());
 export {
-  p as default
+  I as default
 };

package.json

 {
   "name": "range-slider-element",
-  "version": "2.0.0",
+  "version": "2.1.0-rc.0",
   "description": "A cross browser customizable and accessible <range-slider> web component",
@@ -13,2 +13,3 @@ "license": "MIT",
   "type": "module",
+  "types": "./dist/index.d.ts",
   "module": "./dist/range-slider-element.js",
@@ -35,3 +36,3 @@ "main": "./dist/range-slider-element.umd.cjs",
     "build:docs": "vite build --config vite.docs.config.js",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npx tsc",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
@@ -41,7 +42,8 @@ },
     "@biomejs/biome": "1.9.4",
-    "@vitest/browser": "3.0.7",
+    "@vitest/browser": "3.2.2",
     "conventional-changelog-cli": "5.0.0",
-    "playwright": "1.50.1",
-    "vite": "6.2.0",
-    "vitest": "3.0.7"
+    "playwright": "1.52.0",
+    "typescript": "5.8.3",
+    "vite": "6.3.5",
+    "vitest": "3.2.2"
   },
@@ -48,0 +50,0 @@ "volta": {

README.md

@@ -9,3 +9,5 @@ # <range-slider> element
 [![npm downloads](https://img.shields.io/npm/dm/range-slider-element?logo=npm&color=4a46e0&labelColor=212121)](https://www.npmjs.com/package/range-slider-element)
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/range-slider-element?color=4a46e0&labelColor=212121)](https://www.jsdelivr.com/package/npm/range-slider-element)
 
+
 ## Features
@@ -43,3 +45,3 @@
 ```html
-<script type="module" src="https://unpkg.com/range-slider-element@latest/dist/range-slider-element.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/range-slider-element/+esm"></script>
 ```
@@ -60,3 +62,3 @@
 ```html
-<link rel="stylesheet" href="https://unpkg.com/range-slider-element@latest/dist/range-slider-element.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/range-slider-element/dist/range-slider-element.css">
 ```
@@ -105,9 +107,6 @@
 
-## Browser support
+## Examples
 
-Browsers without native [custom element support][support] require a [polyfill][].
+For examples checkout the [CodePen &lt;range-slider&gt; collection](https://codepen.io/collection/XPJJbq).
 
-[support]: https://caniuse.com/#feat=custom-elementsv1
-[polyfill]: https://github.com/webcomponents/custom-elements
-
 ## License
@@ -114,0 +113,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29715

17.65%

Number of package files

9

50%

Lines of code

414

35.29%

Worsened metrics

Dev dependency count

7

16.67%

Number of low quality alerts

2

Infinity%

Number of lines in readme file

113

-0.88%

No dependency changes