@uva-glass/component-library/dist/components/Slider/Slider.js

React components UvA

import { jsxs as g, jsx as a } from "react/jsx-runtime";
import { useState as x, useRef as m, useEffectEvent as z, useEffect as B } from "react";
import { c as H } from "../../clsx-OuTLNxxd.js";
import { Icon as S } from "../Icon/Icon.js";
import '../../assets/Slider.css';const T = "_slider_wrapper_8wxrb_1", j = "_slider_button_8wxrb_8", C = "_slider_trackwrapper_8wxrb_38", D = "_slider_balloon_8wxrb_44", F = "_slider_input_8wxrb_53", l = {
  slider_wrapper: T,
  slider_button: j,
  slider_trackwrapper: C,
  slider_balloon: D,
  slider_input: F
}, v = 0.5, I = 100, p = 16, U = 16, G = ({
  min: t,
  max: o,
  value: i,
  step: k = 1,
  units: c,
  navigationLabels: d,
  disabled: s = !1,
  onChange: u
}) => {
  const [n, f] = x(i !== void 0 ? i : (t + o) * v), [E, V] = x(""), _ = m(null), b = m(null), w = m(null), N = (e) => {
    const r = n + e * k;
    r >= t && r <= o && (f(r), h(r), y(r), u && u(r));
  }, P = (e) => {
    const r = Number(e.target.value);
    f(r), h(r), y(r), u && u(r);
  }, h = (e) => {
    if (!_.current) return;
    const r = (e - t) / (o - t) * I;
    s ? _.current.style.background = `linear-gradient(
         to right, 
         var(--color-grey-700) 0%, 
         var(--color-grey-700) ${r}%, 
         var(--color-grey-400) ${r}%, 
         var(--color-grey-400) 100%)` : _.current.style.background = `linear-gradient(
         to right, 
         var(--color-navy-600) 0%, 
         var(--color-navy-600) ${r}%, 
         var(--color-grey-400) ${r}%, 
         var(--color-grey-400) 100%)`;
  }, y = (e) => {
    if (b.current && w.current) {
      const r = w.current.clientWidth, $ = b.current.clientWidth - p, M = (e - t) / (o - t) * $ - (r - p) * v, W = Math.max(0, Math.min(M, $ - r + p * v));
      V(`${W}px`);
    }
  }, R = z((e) => {
    f(e), h(e), y(e);
  });
  return B(() => {
    i !== void 0 && R(i);
  }, [i, s]), /* @__PURE__ */ g("div", { className: l.slider_wrapper, children: [
    /* @__PURE__ */ a(
      "button",
      {
        type: "button",
        className: l.slider_button,
        onClick: () => N(-1),
        "aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
        disabled: s,
        children: /* @__PURE__ */ a(S, { name: "Minus", size: 20 })
      }
    ),
    /* @__PURE__ */ g("div", { className: l.slider_trackwrapper, ref: b, children: [
      /* @__PURE__ */ g(
        "div",
        {
          className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: s }),
          style: { left: E },
          ref: w,
          children: [
            n,
            c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
          ]
        }
      ),
      /* @__PURE__ */ a(
        "input",
        {
          type: "range",
          className: l.slider_input,
          min: t,
          max: o,
          step: k,
          value: n,
          onChange: P,
          ref: _,
          style: { "--thumb-size": `${p / U}rem` },
          "aria-valuemin": t,
          "aria-valuemax": o,
          "aria-valuenow": n,
          "aria-valuetext": c ? `${n} ${c}` : `${n}`,
          "aria-label": "Slider",
          disabled: s
        }
      )
    ] }),
    /* @__PURE__ */ a(
      "button",
      {
        type: "button",
        className: l.slider_button,
        onClick: () => N(1),
        "aria-label": d?.increase ? d.increase : "Verhoog waarde",
        disabled: s,
        children: /* @__PURE__ */ a(S, { name: "Plus", size: 20 })
      }
    )
  ] });
};
export {
  G as Slider
};
//# sourceMappingURL=Slider.js.map