fui-fancyui/dist/src/components/atoms/RawSlider/RawSlider.js

FancyUI Libary

"use client";
import { jsx as M } from "react/jsx-runtime";
import { useState as f, useEffect as z } from "react";
import { StyledRawSlider as $ } from "./RawSlider.style.js";
function C(p) {
  const {
    max: m,
    min: l,
    value: t,
    ref: d,
    themeType: g = "primary",
    layer: y = 3,
    onChange: a,
    onTouchStart: o,
    style: N,
    onTouchEnd: i,
    sizeC: S = "sm",
    ...b
  } = p, [r, u] = f(t ? Number(t) : 0), [h, s] = f(!1), n = l ? Number(l) : 0, c = m ? Number(m) : 100, v = isNaN(r) ? "0% 100%" : Math.max(0, Math.min(100, (r - n) * 100 / (c - n))) + "% 100%", x = (e) => {
    a == null || a(e), u(Number(e.target.value));
  };
  return z(() => {
    t && u(Number(t));
  }, [t]), /* @__PURE__ */ M(
    $,
    {
      type: "range",
      ref: d,
      $isActive: h,
      $sizeC: S,
      onMouseDown: () => s(!0),
      onMouseUp: () => s(!1),
      onTouchStart: (e) => {
        s(!0), o == null || o(e);
      },
      onTouchEnd: (e) => {
        s(!1), i == null || i(e);
      },
      $themeType: g,
      $layer: y,
      style: { backgroundSize: v, ...N },
      value: isNaN(r) ? 0 : r,
      min: n,
      max: c,
      onChange: x,
      ...b
    }
  );
}
export {
  C as default
};