@lanaco/lnc-react-ui/dist/RangeSlider.js

React component library

import { jsxs as M, jsx as t, Fragment as L } from "react/jsx-runtime";
import { s as v } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { forwardRef as W, useRef as X, useState as f, useCallback as q, useEffect as N } from "react";
import { b as A, c as r, d as D, e as G } from "./utils-BUdHa0nB.js";
import { u as H } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as J } from "./useUpdateEffect-CuYWz7EA.js";
const K = ({ theme: e, size: o }) => {
  var s = G(e, o);
  return `
    min-height: ${s};
    max-height: ${s};
  `;
}, c = {
  small: "0.875rem",
  medium: "1.125rem",
  large: "1.375rem"
}, Q = v.div`
  position: relative;
  ${(e) => K(e)};
  display: inline-flex;
  align-items: center;
`, P = v.input`
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 0.25rem; /* Specified height */
  border-radius: 3px;
  outline: none; /* Remove outline */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  background: ${(e) => e.rangeBackground};
  transition: background 450ms ease-in;
  -webkit-appearance: none;
  border-radius: ${(e) => A(e.theme, "regular")};
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: ${(e) => c[e.size]}; /* Set a specific slider handle width */
    height: ${(e) => c[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${(e) => r(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background",
  "backgroundOpacity"
)};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
  &::-moz-range-thumb {
    width: ${(e) => c[e.size]}; /* Set a specific slider handle width */
    height: ${(e) => c[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${(e) => r(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background",
  "backgroundOpacity"
)};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
`, Y = v.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  ${(e) => D(e.theme, "Range", e.size, "enabled")};
  left: ${(e) => `calc(${e.inputValue + "%"} + (${8 - e.inputValue * 0.15}px))`};
  top: ${(e) => "calc(-" + c[e.size] + ")"};
  transform: translateX(-50%);
  & > .text-content {
    color: white;
    background-color: ${(e) => r(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background"
)};
    border-radius: 3px;
    z-index: 2;
    padding: 2px 6px;
  }
  & > .arrow {
    & > .outer {
      height: 4px;
      position: relative;
      & > .inner {
        width: 8px;
        height: 8px;
        background: ${(e) => r(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background"
)};
        transform: rotate(45deg);
        position: absolute;
        top: -6px;
        left: -4px;
        z-index: 1;
        border-radius: 1px;
      }
    }
  }
`, re = W((e, o) => {
  const {
    defaultValue: s,
    value: i = null,
    min: u = 0,
    max: h = 100,
    disabled: d,
    tabIndex: k = 0,
    onChange: x = () => {
    },
    onInput: $ = () => {
    },
    color: l = "primary",
    size: B = "small",
    className: E = "",
    style: F = {},
    ...w
  } = e, R = X(), g = H(), b = { theme: g, size: B, color: l, className: E, style: F }, C = r(
    g,
    "Range",
    l,
    "enabled",
    "unfilled"
  ), [S, T] = f(
    r(
      g,
      "Range",
      l,
      d ? "disabled" : "enabled",
      "background"
    )
  ), [y, U] = f(), [j, m] = f(), p = q(
    (n) => Math.round((n - u) / (h - u) * 100),
    [u, h]
  ), [a, z] = f(i || s);
  J(() => {
    z(i);
  }, [i]), N(() => {
    I(a || 0);
  }, [a, p, d, l]), N(() => {
    T(
      r(
        g,
        "Range",
        l,
        d ? "disabled" : "enabled",
        "background"
      )
    );
  }, [l, d]);
  const V = (n) => {
    I(n.target.value), $ && $(n);
  }, I = (n) => {
    U(
      `linear-gradient(to right, ${S} 0%, ${S} ${p(
        n
      )}%, ${C} ${p(n)}%, ${C} 100%)`
    );
  }, O = (n) => {
    z(n.target.value), x && x(n);
  };
  return /* @__PURE__ */ M(Q, { ...b, children: [
    j && a && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ M(Y, { ...b, inputValue: p(a), children: [
      /* @__PURE__ */ t("div", { className: "text-content", children: a }),
      /* @__PURE__ */ t("div", { className: "arrow", children: /* @__PURE__ */ t("div", { className: "outer", children: /* @__PURE__ */ t("div", { className: "inner" }) }) })
    ] }) }),
    i == null || i == "undefined" ? /* @__PURE__ */ t(
      P,
      {
        ref: o || R,
        id: "fader",
        type: "range",
        min: u,
        max: h,
        defaultValue: s,
        disabled: d,
        tabIndex: k,
        onMouseEnter: () => {
          m(!0);
        },
        onMouseLeave: () => {
          m(!1);
        },
        rangeBackground: y,
        onInput: V,
        onChange: O,
        ...b,
        ...w
      }
    ) : /* @__PURE__ */ t(
      P,
      {
        ref: o || R,
        id: "fader",
        type: "range",
        min: u,
        max: h,
        value: a,
        disabled: d,
        tabIndex: k,
        onMouseEnter: () => {
          m(!0);
        },
        onMouseLeave: () => {
          m(!1);
        },
        rangeBackground: y,
        onInput: V,
        onChange: O,
        ...b,
        ...w
      }
    )
  ] });
});
export {
  re as default
};