sccoreui
Version:
ui-sccore
40 lines (39 loc) • 4.15 kB
JavaScript
"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;