@cfx-dev/ui-components 4.5.16 → 4.5.18

package/dist/components/Range/RangeWithInputs.js

@@ -0,0 +1,81 @@
+import { jsxs as x, jsx as s } from "react/jsx-runtime";
+import i from "react";
+import C from "../Flex/Flex.js";
+import R from "./Range.js";
+import M from "./RangeInput.js";
+function _(V) {
+  const {
+    value: e,
+    defaultValue: l,
+    onValueChange: m,
+    min: c = 0,
+    max: o = 100,
+    minSign: h,
+    maxSign: S,
+    disabled: f = !1,
+    name: u,
+    ...b
+  } = V, [t, d] = i.useState(() => e ? e[0] : l ? l[0] : c), [n, p] = i.useState(() => e ? e[1] : l ? l[1] : o), r = i.useCallback((a) => {
+    d(a[0]), p(a[1]), m && m(a);
+  }, [m]), j = i.useCallback((a) => {
+    const g = Math.min(Number(a), n);
+    r([g, n]);
+  }, [r, n]), v = i.useCallback((a) => {
+    const g = Math.min(Number(a), o);
+    r([t, g]);
+  }, [r, t, o]);
+  return i.useEffect(() => {
+    e && (d(e[0]), p(e[1]));
+  }, [e]), /* @__PURE__ */ x(C, { gap: 2.5, direction: "column", children: [
+    u && /* @__PURE__ */ s(
+      "input",
+      {
+        type: "hidden",
+        name: u,
+        value: [t, n].join(",")
+      }
+    ),
+    /* @__PURE__ */ s(
+      R,
+      {
+        min: c,
+        max: o,
+        value: [t, n],
+        defaultValue: l,
+        onValueChange: r,
+        disabled: f,
+        name: u,
+        ...b
+      }
+    ),
+    /* @__PURE__ */ x(C, { gap: 2.5, justifyContent: "space-between", children: [
+      /* @__PURE__ */ s(
+        M,
+        {
+          sign: h,
+          value: t,
+          onChange: j,
+          min: c,
+          max: n,
+          disabled: f,
+          id: [u, "min"].filter(Boolean).join("-")
+        }
+      ),
+      /* @__PURE__ */ s(
+        M,
+        {
+          sign: h,
+          value: n,
+          onChange: v,
+          min: t,
+          max: o,
+          disabled: f,
+          id: [u, "max"].filter(Boolean).join("-")
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  _ as default
+};

package/dist/components/Range/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Range } from './Range';
+export { default as RangeInput } from './RangeInput';
+export { default as RangeWithInputs } from './RangeWithInputs';
+export type { RangeProps } from './Range.types';
+export type { RangeInputProps } from './RangeInput';
+export type { RangeWithInputsProps } from './RangeWithInputs';

package/dist/components/Range/index.js

@@ -0,0 +1,8 @@
+import { default as t } from "./Range.js";
+import { default as o } from "./RangeInput.js";
+import { default as n } from "./RangeWithInputs.js";
+export {
+  t as Range,
+  o as RangeInput,
+  n as RangeWithInputs
+};

package/dist/components/Select/Select.js

@@ -3,9 +3,9 @@ import * as l from "react";
 import q from "react";
 import { R as ft, r as De } from "../../index-Cl_RnsqN.js";
 import { c as Ee } from "../../index-rKs9bXHr.js";
-import { a as K, P as N, d as Oe, c as mt, u as B, e as P, b as ht } from "../../index-DCuJlMqr.js";
-import { u as gt, c as vt } from "../../index-BMU9X4M-.js";
-import { c as Le, d as _t, u as Ne, A as St, a as wt, h as xt, b as yt, R as Ct, F as It, D as Tt, C as bt, e as Pt } from "../../Combination-2dfXEDc9.js";
+import { e as K, P as N, u as Oe, c as mt, b as B, a as P, f as ht } from "../../index-CfQtbUfi.js";
+import { u as gt, c as vt } from "../../index-9LBuZ7x4.js";
+import { c as Le, d as _t, u as Ne, A as St, a as wt, h as xt, b as yt, R as Ct, F as It, D as Tt, C as bt, e as Pt } from "../../Combination-CcTTSYNP.js";
 import { u as Nt } from "../../index-BZPx6jYI.js";
 import { Icon as Rt } from "../Icon/Icon.js";
 import { clsx as xe } from "../../utils/clsx.js";

package/dist/components/Slider/Slider.js

@@ -1,488 +1,80 @@
-import { jsx as m, jsxs as K } from "react/jsx-runtime";
-import * as u from "react";
-import O from "react";
-import { c as W } from "../../index-rKs9bXHr.js";
-import { d as fe, c as me, e as M, P as k, u as V, f as he } from "../../index-DCuJlMqr.js";
-import { c as pe, u as Se } from "../../index-BMU9X4M-.js";
-import { u as be } from "../../index-BZPx6jYI.js";
-import { clsx as G } from "../../utils/clsx.js";
-var q = ["PageUp", "PageDown"], J = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], Q = {
-  "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
-  "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
-  "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
-  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
-}, B = "Slider", [U, ge, _e] = pe(B), [Z, Je] = me(B, [
-  _e
-]), [ve, T] = Z(B), ee = u.forwardRef(
-  (e, t) => {
-    const {
-      name: n,
-      min: o = 0,
-      max: s = 100,
-      step: c = 1,
-      orientation: r = "horizontal",
-      disabled: a = !1,
-      minStepsBetweenThumbs: l = 0,
-      defaultValue: h = [o],
-      value: p,
-      onValueChange: i = () => {
-      },
-      onValueCommit: d = () => {
-      },
-      inverted: g = !1,
-      form: x,
-      ...S
-    } = e, b = u.useRef(/* @__PURE__ */ new Set()), f = u.useRef(0), v = r === "horizontal" ? we : xe, [_ = [], I] = fe({
-      prop: p,
-      defaultProp: h,
-      onChange: (w) => {
-        var D;
-        (D = [...b.current][f.current]) == null || D.focus(), i(w);
-      }
-    }), L = u.useRef(_);
-    function H(w) {
-      const R = De(_, w);
-      A(w, R);
-    }
-    function de(w) {
-      A(w, f.current);
-    }
-    function ue() {
-      const w = L.current[f.current];
-      _[f.current] !== w && d(_);
-    }
-    function A(w, R, { commit: D } = { commit: !1 }) {
-      const j = Be(c), z = Ie(Math.round((w - o) / c) * c + o, j), N = W(z, [o, s]);
-      I((E = []) => {
-        const P = ye(E, N, R);
-        if (Ve(P, l * c)) {
-          f.current = P.indexOf(N);
-          const X = String(P) !== String(E);
-          return X && D && d(P), X ? P : E;
-        } else
-          return E;
-      });
-    }
-    return /* @__PURE__ */ m(
-      ve,
-      {
-        scope: e.__scopeSlider,
-        name: n,
-        disabled: a,
-        min: o,
-        max: s,
-        valueIndexToChangeRef: f,
-        thumbs: b.current,
-        values: _,
-        orientation: r,
-        form: x,
-        children: /* @__PURE__ */ m(U.Provider, { scope: e.__scopeSlider, children: /* @__PURE__ */ m(U.Slot, { scope: e.__scopeSlider, children: /* @__PURE__ */ m(
-          v,
-          {
-            "aria-disabled": a,
-            "data-disabled": a ? "" : void 0,
-            ...S,
-            ref: t,
-            onPointerDown: M(S.onPointerDown, () => {
-              a || (L.current = _);
-            }),
-            min: o,
-            max: s,
-            inverted: g,
-            onSlideStart: a ? void 0 : H,
-            onSlideMove: a ? void 0 : de,
-            onSlideEnd: a ? void 0 : ue,
-            onHomeKeyDown: () => !a && A(o, 0, { commit: !0 }),
-            onEndKeyDown: () => !a && A(s, _.length - 1, { commit: !0 }),
-            onStepKeyDown: ({ event: w, direction: R }) => {
-              if (!a) {
-                const z = q.includes(w.key) || w.shiftKey && J.includes(w.key) ? 10 : 1, N = f.current, E = _[N], P = c * z * R;
-                A(E + P, N, { commit: !0 });
-              }
-            }
-          }
-        ) }) })
-      }
-    );
-  }
-);
-ee.displayName = B;
-var [te, ne] = Z(B, {
-  startEdge: "left",
-  endEdge: "right",
-  size: "width",
-  direction: 1
-}), we = u.forwardRef(
-  (e, t) => {
-    const {
-      min: n,
-      max: o,
-      dir: s,
-      inverted: c,
-      onSlideStart: r,
-      onSlideMove: a,
-      onSlideEnd: l,
-      onStepKeyDown: h,
-      ...p
-    } = e, [i, d] = u.useState(null), g = V(t, (v) => d(v)), x = u.useRef(void 0), S = Se(s), b = S === "ltr", f = b && !c || !b && c;
-    function C(v) {
-      const _ = x.current || i.getBoundingClientRect(), I = [0, _.width], H = $(I, f ? [n, o] : [o, n]);
-      return x.current = _, H(v - _.left);
-    }
-    return /* @__PURE__ */ m(
-      te,
-      {
-        scope: e.__scopeSlider,
-        startEdge: f ? "left" : "right",
-        endEdge: f ? "right" : "left",
-        direction: f ? 1 : -1,
-        size: "width",
-        children: /* @__PURE__ */ m(
-          oe,
-          {
-            dir: S,
-            "data-orientation": "horizontal",
-            ...p,
-            ref: g,
-            style: {
-              ...p.style,
-              "--radix-slider-thumb-transform": "translateX(-50%)"
-            },
-            onSlideStart: (v) => {
-              const _ = C(v.clientX);
-              r == null || r(_);
-            },
-            onSlideMove: (v) => {
-              const _ = C(v.clientX);
-              a == null || a(_);
-            },
-            onSlideEnd: () => {
-              x.current = void 0, l == null || l();
-            },
-            onStepKeyDown: (v) => {
-              const I = Q[f ? "from-left" : "from-right"].includes(v.key);
-              h == null || h({ event: v, direction: I ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-), xe = u.forwardRef(
-  (e, t) => {
-    const {
-      min: n,
-      max: o,
-      inverted: s,
-      onSlideStart: c,
-      onSlideMove: r,
-      onSlideEnd: a,
-      onStepKeyDown: l,
-      ...h
-    } = e, p = u.useRef(null), i = V(t, p), d = u.useRef(void 0), g = !s;
-    function x(S) {
-      const b = d.current || p.current.getBoundingClientRect(), f = [0, b.height], v = $(f, g ? [o, n] : [n, o]);
-      return d.current = b, v(S - b.top);
-    }
-    return /* @__PURE__ */ m(
-      te,
-      {
-        scope: e.__scopeSlider,
-        startEdge: g ? "bottom" : "top",
-        endEdge: g ? "top" : "bottom",
-        size: "height",
-        direction: g ? 1 : -1,
-        children: /* @__PURE__ */ m(
-          oe,
-          {
-            "data-orientation": "vertical",
-            ...h,
-            ref: i,
-            style: {
-              ...h.style,
-              "--radix-slider-thumb-transform": "translateY(50%)"
-            },
-            onSlideStart: (S) => {
-              const b = x(S.clientY);
-              c == null || c(b);
-            },
-            onSlideMove: (S) => {
-              const b = x(S.clientY);
-              r == null || r(b);
-            },
-            onSlideEnd: () => {
-              d.current = void 0, a == null || a();
-            },
-            onStepKeyDown: (S) => {
-              const f = Q[g ? "from-bottom" : "from-top"].includes(S.key);
-              l == null || l({ event: S, direction: f ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-), oe = u.forwardRef(
-  (e, t) => {
-    const {
-      __scopeSlider: n,
-      onSlideStart: o,
-      onSlideMove: s,
-      onSlideEnd: c,
-      onHomeKeyDown: r,
-      onEndKeyDown: a,
-      onStepKeyDown: l,
-      ...h
-    } = e, p = T(B, n);
-    return /* @__PURE__ */ m(
-      k.span,
-      {
-        ...h,
-        ref: t,
-        onKeyDown: M(e.onKeyDown, (i) => {
-          i.key === "Home" ? (r(i), i.preventDefault()) : i.key === "End" ? (a(i), i.preventDefault()) : q.concat(J).includes(i.key) && (l(i), i.preventDefault());
-        }),
-        onPointerDown: M(e.onPointerDown, (i) => {
-          const d = i.target;
-          d.setPointerCapture(i.pointerId), i.preventDefault(), p.thumbs.has(d) ? d.focus() : o(i);
-        }),
-        onPointerMove: M(e.onPointerMove, (i) => {
-          i.target.hasPointerCapture(i.pointerId) && s(i);
-        }),
-        onPointerUp: M(e.onPointerUp, (i) => {
-          const d = i.target;
-          d.hasPointerCapture(i.pointerId) && (d.releasePointerCapture(i.pointerId), c(i));
-        })
-      }
-    );
-  }
-), re = "SliderTrack", ie = u.forwardRef(
-  (e, t) => {
-    const { __scopeSlider: n, ...o } = e, s = T(re, n);
-    return /* @__PURE__ */ m(
-      k.span,
-      {
-        "data-disabled": s.disabled ? "" : void 0,
-        "data-orientation": s.orientation,
-        ...o,
-        ref: t
-      }
-    );
-  }
-);
-ie.displayName = re;
-var F = "SliderRange", ae = u.forwardRef(
-  (e, t) => {
-    const { __scopeSlider: n, ...o } = e, s = T(F, n), c = ne(F, n), r = u.useRef(null), a = V(t, r), l = s.values.length, h = s.values.map(
-      (d) => le(d, s.min, s.max)
-    ), p = l > 1 ? Math.min(...h) : 0, i = 100 - Math.max(...h);
-    return /* @__PURE__ */ m(
-      k.span,
-      {
-        "data-orientation": s.orientation,
-        "data-disabled": s.disabled ? "" : void 0,
-        ...o,
-        ref: a,
-        style: {
-          ...e.style,
-          [c.startEdge]: p + "%",
-          [c.endEdge]: i + "%"
-        }
-      }
-    );
-  }
-);
-ae.displayName = F;
-var Y = "SliderThumb", se = u.forwardRef(
-  (e, t) => {
-    const n = ge(e.__scopeSlider), [o, s] = u.useState(null), c = V(t, (a) => s(a)), r = u.useMemo(
-      () => o ? n().findIndex((a) => a.ref.current === o) : -1,
-      [n, o]
-    );
-    return /* @__PURE__ */ m(Re, { ...e, ref: c, index: r });
-  }
-), Re = u.forwardRef(
-  (e, t) => {
-    const { __scopeSlider: n, index: o, name: s, ...c } = e, r = T(Y, n), a = ne(Y, n), [l, h] = u.useState(null), p = V(t, (C) => h(C)), i = l ? r.form || !!l.closest("form") : !0, d = he(l), g = r.values[o], x = g === void 0 ? 0 : le(g, r.min, r.max), S = Ce(o, r.values.length), b = d == null ? void 0 : d[a.size], f = b ? Ee(b, x, a.direction) : 0;
-    return u.useEffect(() => {
-      if (l)
-        return r.thumbs.add(l), () => {
-          r.thumbs.delete(l);
-        };
-    }, [l, r.thumbs]), /* @__PURE__ */ K(
-      "span",
-      {
-        style: {
-          transform: "var(--radix-slider-thumb-transform)",
-          position: "absolute",
-          [a.startEdge]: `calc(${x}% + ${f}px)`
-        },
-        children: [
-          /* @__PURE__ */ m(U.ItemSlot, { scope: e.__scopeSlider, children: /* @__PURE__ */ m(
-            k.span,
-            {
-              role: "slider",
-              "aria-label": e["aria-label"] || S,
-              "aria-valuemin": r.min,
-              "aria-valuenow": g,
-              "aria-valuemax": r.max,
-              "aria-orientation": r.orientation,
-              "data-orientation": r.orientation,
-              "data-disabled": r.disabled ? "" : void 0,
-              tabIndex: r.disabled ? void 0 : 0,
-              ...c,
-              ref: p,
-              style: g === void 0 ? { display: "none" } : e.style,
-              onFocus: M(e.onFocus, () => {
-                r.valueIndexToChangeRef.current = o;
-              })
-            }
-          ) }),
-          i && /* @__PURE__ */ m(
-            ce,
-            {
-              name: s ?? (r.name ? r.name + (r.values.length > 1 ? "[]" : "") : void 0),
-              form: r.form,
-              value: g
-            },
-            o
-          )
-        ]
-      }
-    );
-  }
-);
-se.displayName = Y;
-var Pe = "RadioBubbleInput", ce = u.forwardRef(
-  ({ __scopeSlider: e, value: t, ...n }, o) => {
-    const s = u.useRef(null), c = V(s, o), r = be(t);
-    return u.useEffect(() => {
-      const a = s.current;
-      if (!a) return;
-      const l = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(l, "value").set;
-      if (r !== t && p) {
-        const i = new Event("input", { bubbles: !0 });
-        p.call(a, t), a.dispatchEvent(i);
-      }
-    }, [r, t]), /* @__PURE__ */ m(
-      k.input,
-      {
-        style: { display: "none" },
-        ...n,
-        ref: c,
-        defaultValue: t
-      }
-    );
-  }
-);
-ce.displayName = Pe;
-function ye(e = [], t, n) {
-  const o = [...e];
-  return o[n] = t, o.sort((s, c) => s - c);
-}
-function le(e, t, n) {
-  const c = 100 / (n - t) * (e - t);
-  return W(c, [0, 100]);
-}
-function Ce(e, t) {
-  return t > 2 ? `Value ${e + 1} of ${t}` : t === 2 ? ["Minimum", "Maximum"][e] : void 0;
-}
-function De(e, t) {
-  if (e.length === 1) return 0;
-  const n = e.map((s) => Math.abs(s - t)), o = Math.min(...n);
-  return n.indexOf(o);
-}
-function Ee(e, t, n) {
-  const o = e / 2, c = $([0, 50], [0, o]);
-  return (o - c(t) * n) * n;
-}
-function Me(e) {
-  return e.slice(0, -1).map((t, n) => e[n + 1] - t);
-}
-function Ve(e, t) {
-  if (t > 0) {
-    const n = Me(e);
-    return Math.min(...n) >= t;
-  }
-  return !0;
-}
-function $(e, t) {
-  return (n) => {
-    if (e[0] === e[1] || t[0] === t[1]) return t[0];
-    const o = (t[1] - t[0]) / (e[1] - e[0]);
-    return t[0] + o * (n - e[0]);
-  };
-}
-function Be(e) {
-  return (String(e).split(".")[1] || "").length;
-}
-function Ie(e, t) {
-  const n = Math.pow(10, t);
-  return Math.round(e * n) / n;
-}
-var Ae = ee, Ne = ie, ke = ae, Ke = se;
-const Te = "cfxui__Slider__container__997ea", Le = "cfxui__Slider__labels__2a966", He = "cfxui__Slider__root__a6c1b", ze = "cfxui__Slider__track__570cb", Oe = "cfxui__Slider__range__5ae17", Ue = "cfxui__Slider__thumb__27d80", Fe = "cfxui__Slider__valueBubble__ebce8", y = {
-  container: Te,
-  labels: Le,
-  root: He,
-  track: ze,
-  range: Oe,
-  thumb: Ue,
-  valueBubble: Fe
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { R as C, T as L, a as R, b as y } from "../../index-D5SMGei3.js";
+import i from "react";
+import { clsx as f } from "../../utils/clsx.js";
+const B = "cfxui__Slider__container__997ea", V = "cfxui__Slider__labels__2a966", j = "cfxui__Slider__root__a6c1b", T = "cfxui__Slider__track__570cb", E = "cfxui__Slider__range__5ae17", P = "cfxui__Slider__thumb__27d80", q = "cfxui__Slider__valueBubble__ebce8", a = {
+  container: B,
+  labels: V,
+  root: j,
+  track: T,
+  range: E,
+  thumb: P,
+  valueBubble: q
 };
-function Qe(e) {
+function G(h) {
   const {
-    value: t,
-    defaultValue: n,
-    title: o,
-    ariaLabel: s,
-    className: c,
-    trackClassName: r,
-    minLabel: a,
-    maxLabel: l,
-    min: h = 0,
-    max: p,
-    onValueChange: i,
-    ref: d,
+    value: l,
+    defaultValue: r,
+    title: x,
+    ariaLabel: p,
+    className: v,
+    trackClassName: N,
+    minLabel: o,
+    maxLabel: _,
+    min: u = 0,
+    max: d,
+    onValueChange: t,
+    ref: S,
+    name: n,
     ...g
-  } = e, [x, S] = O.useState(() => {
-    if (t)
-      return t;
-    if (n)
-      return n;
-  }), b = O.useCallback((f) => {
-    if (i) {
-      i(f);
+  } = h, [c, b] = i.useState(() => {
+    if (l)
+      return l;
+    if (r)
+      return r;
+  }), k = i.useCallback((m) => {
+    if (t) {
+      t(m);
       return;
     }
-    S(f);
-  }, [i]);
-  return O.useEffect(() => {
-    t && S(t);
-  }, [t]), /* @__PURE__ */ K("div", { className: y.container, children: [
-    /* @__PURE__ */ K(
-      Ae,
+    b(m);
+  }, [t]);
+  return i.useEffect(() => {
+    l && b(l);
+  }, [l]), /* @__PURE__ */ s("div", { className: a.container, children: [
+    n && /* @__PURE__ */ e(
+      "input",
+      {
+        type: "hidden",
+        name: n,
+        value: c ? c[0] : ""
+      }
+    ),
+    /* @__PURE__ */ s(
+      C,
       {
         ...g,
-        ref: d,
-        min: h,
-        max: p,
-        value: t,
-        className: G(y.root, c),
-        onValueChange: b,
+        defaultValue: r,
+        ref: S,
+        min: u,
+        max: d,
+        value: l,
+        className: f(a.root, v),
+        onValueChange: k,
+        name: n,
         children: [
-          /* @__PURE__ */ m(Ne, { className: G(y.track, r), children: /* @__PURE__ */ m(ke, { className: y.range }) }),
-          /* @__PURE__ */ m(Ke, { className: y.thumb, "aria-label": s, children: /* @__PURE__ */ m("div", { className: y.valueBubble, children: [x, o].join(" ") }) })
+          /* @__PURE__ */ e(L, { className: f(a.track, N), children: /* @__PURE__ */ e(R, { className: a.range }) }),
+          /* @__PURE__ */ e(y, { className: a.thumb, "aria-label": p, children: /* @__PURE__ */ e("div", { className: a.valueBubble, children: [c, x].join(" ") }) })
         ]
       }
     ),
-    /* @__PURE__ */ K("div", { className: y.labels, children: [
-      /* @__PURE__ */ m("span", { children: typeof a < "u" ? a : h }),
-      /* @__PURE__ */ m("span", { children: typeof l < "u" ? l : p })
+    /* @__PURE__ */ s("div", { className: a.labels, children: [
+      /* @__PURE__ */ e("span", { children: typeof o < "u" ? o : u }),
+      /* @__PURE__ */ e("span", { children: typeof _ < "u" ? _ : d })
     ] })
   ] });
 }
 export {
-  Qe as Slider,
-  Qe as default
+  G as Slider,
+  G as default
 };

package/dist/components/Slider/SliderShowcase.js

@@ -4,8 +4,8 @@ import a from "../Flex/Flex.js";
 import { Text as t } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { Slider as l } from "./Slider.js";
-const c = "cfxui__SliderShowcase__track__9ceda", o = {
-  track: c
+const m = "cfxui__SliderShowcase__track__9ceda", o = {
+  track: m
 };
 function s() {
   return /* @__PURE__ */ r(a, { gap: "large", vertical: !0, children: [
@@ -26,7 +26,8 @@ function s() {
               step: 1,
               ariaLabel: "Volume",
               className: "",
-              trackClassName: o.track
+              trackClassName: o.track,
+              name: "volume"
             }
           )
         }
@@ -49,7 +50,8 @@ function s() {
               step: 5,
               ariaLabel: "Custom Slider",
               className: "custom-slider-class",
-              title: "Upvotes"
+              title: "Upvotes",
+              name: "custom-slider"
             }
           )
         }