import { jsxs as M, jsx as l } from "react/jsx-runtime";
import { useState as m, useEffect as U } from "react";
import { noop as d } from "es-toolkit/compat";
import j from "../../utils/classNames.js";
import { getCurrentBackgroundColor as A } from "../../utils/currentColors.js";
const X = (g) => {
  const {
    value: e = 0,
    minValue: a = 0,
    maxValue: r = Number.MAX_VALUE,
    valueLabels: o = !1,
    valueLabelUnit: t,
    largeValueLabels: h = !1,
    hideValueBar: p = !1,
    color: f = "primary",
    step: v = 1,
    onChange: b = d,
    onDragEnd: C = d,
    className: i,
    disabled: N = !1,
    ...V
  } = g, [s, c] = m(e || a), [w, n] = m(!1);
  U(() => {
    e >= a && e <= r && c(e);
  }, [e, a, r]);
  const k = (E) => {
    const u = Number.parseInt(E.target.value, 10);
    c(u), n(!0), b(u);
  }, x = () => {
    n(!1), C(s);
  }, y = () => {
    n(!0);
  }, L = j(
    "range-slider",
    N && "disabled",
    o && "show-value-labels",
    p && "hide-value-bar",
    h && "large-value-labels",
    i && i
  ), $ = 100 * (s - a) / (r - a), B = A(f);
  return /* @__PURE__ */ M("div", { ...V, className: L, style: { color: B }, children: [
    /* @__PURE__ */ l("div", { className: "range-whole-track" }),
    /* @__PURE__ */ l("div", { className: "range-track", style: { width: `${$}%` }, children: o && /* @__PURE__ */ l("div", { className: "range-value", children: /* @__PURE__ */ l("span", { children: t ? `${s} ${t}` : s }) }) }),
    /* @__PURE__ */ l(
      "input",
      {
        className: `${w ? "changing" : ""}`,
        value: s,
        min: a,
        max: r,
        step: v,
        type: "range",
        onChange: k,
        onMouseDown: y,
        onMouseUp: x
      }
    )
  ] });
};
export {
  X as default
};
//# sourceMappingURL=Slider.js.map
