sccoreui 6.3.95 → 6.3.97

package/dist/pages/sliders/slider.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const slider_1 = require("primereact/slider");
+function default_1() {
+    const [value, setValue] = (0, react_1.useState)([10, 10]);
+    console.log(value);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex mt-8 flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative w-full " }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[0]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-lg" }, { children: [value[0], "%"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[1]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-lg" }, { children: [value[1], "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative w-full" }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[0]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white border-gray-200 py-2 flex align-items-center text-center text-lg" }, { children: [value[0], "%"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[1]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white  border-gray-200 py-2 flex align-items-center  text-center text-lg" }, { children: [value[1], "%"] }))] })) }))] }))] }));
+}
+exports.default = default_1;