@mankindui/core/dist/components/Slider/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 o } from "../../_virtual/jsx-runtime.js";
import { useRef as k, useState as E, useEffect as I } from "react";
import { Orientation as t } from "../../types/Orientation.js";
const L = ({
  onChange: h,
  orientation: n = t.HORIZONTAL,
  length: a,
  offset: s = "0px",
  thickness: x = 15,
  value: p = 0,
  min: f = 0,
  max: m = 100,
  step: l = 1,
  index: $ = 0,
  trackClickable: b = !0,
  hideTrack: O = !1,
  valueGradient: j = void 0,
  activeColor: d = "red",
  trackColor: c = "#FF000055",
  className: g = "",
  style: u = {},
  thumbSize: i = 30
}) => {
  const e = k(null), [w, A] = E();
  I(() => {
    var r;
    e != null && e.current && A((r = e.current) == null ? void 0 : r.offsetHeight);
  }, [e.current, n]);
  const H = (r, R) => {
    h(parseInt(r), R);
  };
  return /* @__PURE__ */ o.jsxs(
    "div",
    {
      ref: e,
      className: [g].join(" "),
      style: {
        ...n === t.HORIZONTAL && {
          width: a || "100%",
          marginLeft: s,
          ...u
        },
        ...n === t.VERTICAL && {
          height: a || "100%",
          marginTop: s,
          //check if it should maybe be marginBottom
          ...u
        }
      },
      children: [
        /* @__PURE__ */ o.jsx(
          "input",
          {
            type: "range",
            className: [g].join(" "),
            onChange: (r) => H(r.target.value, $),
            value: p,
            min: f,
            max: m,
            step: l,
            style: {
              ...n === t.HORIZONTAL && {
                width: "100%"
              },
              ...n === t.VERTICAL && {
                width: `${w}px`,
                //width should now be height of parent container when vertical - use js to get height of container or use prop's length value
                transformOrigin: "top left",
                transform: " rotate(-90deg) translateX(-100%)"
                /* Rotate the scrollbar counterclockwise by 90 degrees */
              },
              height: `${x}px`,
              borderRadius: "10px",
              outline: "none",
              pointerEvents: b ? "auto" : "none",
              //removes the default input range styling - DO NOT REMOVE
              appearance: "none",
              WebkitAppearance: "none",
              //-webkit-appearance: none;
              MozAppearance: "none",
              //   -moz-appearance: none;
              background: O ? "transparent" : j || `linear-gradient(90deg, ${d} 0%, ${d} ${p}%, ${c} ${p}%, ${c} 100% )`
              //   //slider track - value highlight color AND background color - DO NOT REMOVE
            }
          }
        ),
        /* @__PURE__ */ o.jsx("style", { children: `
                /* Webkit (Chrome, Safari, Edge) */
                input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: ${i}px;
                height: ${i}px;
                background: red;
                border-radius: 50%;
                cursor: pointer;
                }

                /* Firefox */
                input[type="range"]::-moz-range-thumb {
                -moz-appearance: none;
                width: ${i}px;
                height: ${i}px;
                background: red;
                border-radius: 50%;
                cursor: pointer;
                }
            ` })
      ]
    }
  );
};
L.displayName = "Slider";
export {
  L as Slider
};
//# sourceMappingURL=index.js.map