lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
34 lines • 2.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const AnimatedRangeInput = ({ value, onChange, icon, labelId, fillColor = "#ff5722", // Orange
}) => {
// Handle reverse direction: Top = 100, Bottom = 0
const handleChange = (e) => {
const rawValue = Number(e.target.value);
const correctedValue = 100 - rawValue;
onChange(correctedValue);
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center w-40 h-60 ", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -left-10 flex flex-col items-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "text-black text-xl", children: icon }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center w-16 h-full rounded-xl border border-gray-300 overflow-hidden bg-white", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0 }, animate: { height: `${value}%` }, exit: { height: 0 }, transition: { duration: 0.3 }, style: {
position: "absolute",
bottom: 0,
left: 0,
width: "100%",
backgroundColor: fillColor,
zIndex: 1,
borderRadius: "inherit",
} }, "fill") }), (0, jsx_runtime_1.jsxs)("span", { className: "absolute text-black text-sm font-bold z-10", children: [value, "%"] }), (0, jsx_runtime_1.jsx)("input", { id: labelId, type: "range", min: 0, max: 100, step: 1, value: 100 - value, onChange: handleChange, style: {
transform: "rotate(-90deg)",
width: "100%",
height: "100%",
position: "relative",
zIndex: 2,
background: "transparent",
WebkitAppearance: "none", // necessary for WebKit
appearance: "none", // for Firefox
cursor: "pointer",
} })] })] }));
};
exports.default = AnimatedRangeInput;
//# sourceMappingURL=animated-range-input.js.map