@mankindui/core/dist/components/SliderMultiRange/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as R } from "../../_virtual/jsx-runtime.js";
import { useState as L, useRef as C } from "react";
import "../index.js";
import { Orientation as h } from "../../types/Orientation.js";
import { Slider as E } from "../Slider/index.js";
const G = ({
  sliderValues: g = [0, 0, 0],
  // colors = ['red', 'yellow', 'blue'],
  onChange: l,
  min: a = 0,
  max: I = 100,
  thickness: m = 15,
  thumbSize: p = 30,
  slideMode: n = "magnetic",
  orientation: o = h.HORIZONTAL,
  trackClickable: s = !1,
  hideTrack: O = !0
}) => {
  const [T, e] = L(null), A = (c, r) => {
    let t = g.length === 1 || c === 0 ? a : g[c - 1], f = g.length === 1 || c === g.length - 1 ? I : g[c + 1];
    return r <= t && (r = t), r >= f && (r = f), r;
  }, N = (c, r = 0) => {
    let t;
    if (e(r), n === "restrict") {
      const H = A(r, c);
      t = [...g], t[r] = H;
    }
    if (n === "magnetic") {
      if (t = [...g], c < t[r]) {
        t[r] = c;
        for (var f = r; f > 0; f--)
          t[f] - t[f - 1] <= 0 && (t[f - 1] = t[f]);
      }
      if (c > t[r]) {
        t[r] = c;
        for (var f = r; f < g.length - 1; f++)
          t[f + 1] - t[f] <= 0 && (t[f + 1] = t[f]);
      }
    }
    n === "slidethrough" && (t = [...g], t[r] = c), t && l(t);
  }, j = C(null);
  return /* @__PURE__ */ R.jsxs(
    "div",
    {
      "data-component": "SliderMultiRange",
      ref: j,
      className: [o === h.HORIZONTAL && "w-full", o === h.VERTICAL && "h-full", "relative"].join(" "),
      children: [
        /* @__PURE__ */ R.jsx(
          "div",
          {
            "data-component": "SliderTrack",
            className: ["absolute rounded-full bg-red-600/40"].join(" "),
            style: {
              ...o === h.HORIZONTAL && {
                width: "100%",
                height: `${m}px`
              },
              ...o === h.VERTICAL && {
                width: `${m}px`,
                height: "100%"
              }
            }
          }
        ),
        (g || []).map((c, r) => {
          const t = o === h.HORIZONTAL ? p * r + "px" : `${(g.length - 1 - r) * p}px`;
          return /* @__PURE__ */ R.jsx(
            E,
            {
              orientation: o,
              value: c,
              index: r,
              className: "absolute",
              onChange: N,
              length: n === "slidethrough" ? "100%" : `calc(100% - ${(g.length - 1) * p}px)`,
              min: a,
              max: I,
              style: { zIndex: r === T ? 1 : 0 },
              offset: n === "slidethrough" ? "0px" : t,
              trackClickable: s,
              hideTrack: O,
              thumbSize: p,
              thickness: m
            },
            r
          );
        })
      ]
    }
  );
};
export {
  G as SliderMultiRange
};
//# sourceMappingURL=index.js.map