@fangxinyan/lumina 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Slider-X4PVA65R.css → Slider-3JKA5EW6.css} +44 -25
- package/dist/Slider.cjs +2 -2
- package/dist/Slider.d.cts +8 -5
- package/dist/Slider.d.ts +8 -5
- package/dist/Slider.js +1 -1
- package/dist/chunk-2TZ2R7L2.js +235 -0
- package/dist/chunk-2TZ2R7L2.js.map +1 -0
- package/dist/chunk-N6ZLZUBF.cjs +257 -0
- package/dist/chunk-N6ZLZUBF.cjs.map +1 -0
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/styles.css +38 -25
- package/docs/llms/form.md +26 -0
- package/docs/llms/slider.md +13 -2
- package/docs/llms.md +3 -3
- package/package.json +1 -1
- package/dist/chunk-B5JH7NRZ.cjs +0 -133
- package/dist/chunk-B5JH7NRZ.cjs.map +0 -1
- package/dist/chunk-QJGKI2BD.js +0 -111
- package/dist/chunk-QJGKI2BD.js.map +0 -1
package/dist/chunk-B5JH7NRZ.cjs
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
require('./tokens-BIIUTPKN.css');
|
|
4
|
-
require('./shared-NJHRNLRH.css');
|
|
5
|
-
require('./Slider-X4PVA65R.css');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
-
|
|
9
|
-
function _interopNamespace(e) {
|
|
10
|
-
if (e && e.__esModule) return e;
|
|
11
|
-
var n = Object.create(null);
|
|
12
|
-
if (e) {
|
|
13
|
-
Object.keys(e).forEach(function (k) {
|
|
14
|
-
if (k !== 'default') {
|
|
15
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function () { return e[k]; }
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
n.default = e;
|
|
24
|
-
return Object.freeze(n);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
|
-
|
|
29
|
-
// src/components/Slider/Slider.tsx
|
|
30
|
-
var asArray = (v, fallback) => {
|
|
31
|
-
if (v === void 0) return [fallback];
|
|
32
|
-
return Array.isArray(v) ? [...v] : [v];
|
|
33
|
-
};
|
|
34
|
-
var Slider = (props) => {
|
|
35
|
-
const {
|
|
36
|
-
min = 0,
|
|
37
|
-
max = 100,
|
|
38
|
-
step = 1,
|
|
39
|
-
disabled,
|
|
40
|
-
showValue,
|
|
41
|
-
tone = "accent",
|
|
42
|
-
marks,
|
|
43
|
-
className = ""
|
|
44
|
-
} = props;
|
|
45
|
-
const range = props.range === true;
|
|
46
|
-
const value = props.value;
|
|
47
|
-
const defaultValue = props.defaultValue;
|
|
48
|
-
const onChange = props.onChange;
|
|
49
|
-
const initial = React__namespace.useMemo(() => {
|
|
50
|
-
if (defaultValue !== void 0) return asArray(defaultValue, 0);
|
|
51
|
-
return range ? [min, max] : [0];
|
|
52
|
-
}, []);
|
|
53
|
-
const [inner, setInner] = React__namespace.useState(initial);
|
|
54
|
-
const isControlled = value !== void 0;
|
|
55
|
-
const nums = isControlled ? asArray(value, range ? min : 0) : inner;
|
|
56
|
-
const pctOf = (n) => (n - min) / (max - min) * 100;
|
|
57
|
-
const emit = (arr) => {
|
|
58
|
-
if (range) {
|
|
59
|
-
onChange?.([arr[0], arr[1]]);
|
|
60
|
-
} else {
|
|
61
|
-
onChange?.(arr[0]);
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
const updateAt = (index, next) => {
|
|
65
|
-
const clamped = Math.max(min, Math.min(max, next));
|
|
66
|
-
const out = [...nums];
|
|
67
|
-
out[index] = clamped;
|
|
68
|
-
if (range && out.length === 2 && out[0] > out[1]) {
|
|
69
|
-
out.sort((a, b) => a - b);
|
|
70
|
-
}
|
|
71
|
-
if (!isControlled) setInner(out);
|
|
72
|
-
emit(out);
|
|
73
|
-
};
|
|
74
|
-
const handleMarkClick = (mark) => {
|
|
75
|
-
if (disabled) return;
|
|
76
|
-
if (!range) {
|
|
77
|
-
updateAt(0, mark);
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
const [a, b] = nums;
|
|
81
|
-
const closerIndex = Math.abs(a - mark) <= Math.abs(b - mark) ? 0 : 1;
|
|
82
|
-
updateAt(closerIndex, mark);
|
|
83
|
-
};
|
|
84
|
-
const fillLeft = range ? pctOf(Math.min(nums[0], nums[1])) : 0;
|
|
85
|
-
const fillRight = range ? 100 - pctOf(Math.max(nums[0], nums[1])) : 100 - pctOf(nums[0]);
|
|
86
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `slider ${tone} ${disabled ? "disabled" : ""} ${marks ? "has-marks" : ""} ${className}`, children: [
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "slider-track", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
88
|
-
"div",
|
|
89
|
-
{
|
|
90
|
-
className: "slider-fill",
|
|
91
|
-
style: { left: `${fillLeft}%`, right: `${fillRight}%` }
|
|
92
|
-
}
|
|
93
|
-
) }),
|
|
94
|
-
nums.map((n, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
|
|
95
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "slider-thumb", style: { left: `${pctOf(n)}%` } }),
|
|
96
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
97
|
-
"input",
|
|
98
|
-
{
|
|
99
|
-
type: "range",
|
|
100
|
-
min,
|
|
101
|
-
max,
|
|
102
|
-
step,
|
|
103
|
-
value: n,
|
|
104
|
-
disabled,
|
|
105
|
-
onChange: (e) => updateAt(i, Number(e.target.value))
|
|
106
|
-
}
|
|
107
|
-
)
|
|
108
|
-
] }, i)),
|
|
109
|
-
showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: range ? `${nums[0]} \u2013 ${nums[1]}` : nums[0] }),
|
|
110
|
-
marks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "slider-marks", children: Object.entries(marks).map(([k, label]) => {
|
|
111
|
-
const n = Number(k);
|
|
112
|
-
const left = pctOf(n);
|
|
113
|
-
const active = range ? n >= Math.min(nums[0], nums[1]) && n <= Math.max(nums[0], nums[1]) : n <= nums[0];
|
|
114
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
115
|
-
"span",
|
|
116
|
-
{
|
|
117
|
-
className: `slider-mark ${active ? "active" : ""}`,
|
|
118
|
-
style: { left: `${left}%` },
|
|
119
|
-
onClick: () => handleMarkClick(n),
|
|
120
|
-
children: [
|
|
121
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-mark-dot" }),
|
|
122
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-mark-label", children: label })
|
|
123
|
-
]
|
|
124
|
-
},
|
|
125
|
-
k
|
|
126
|
-
);
|
|
127
|
-
}) })
|
|
128
|
-
] });
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
exports.Slider = Slider;
|
|
132
|
-
//# sourceMappingURL=chunk-B5JH7NRZ.cjs.map
|
|
133
|
-
//# sourceMappingURL=chunk-B5JH7NRZ.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Slider/Slider.tsx"],"names":["React","jsxs","jsx"],"mappings":"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","file":"chunk-B5JH7NRZ.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Slider.css\";\nimport * as React from \"react\";\n\nexport type SliderSingleValue = number;\nexport type SliderRangeValue = [number, number];\nexport type SliderValue = SliderSingleValue | SliderRangeValue;\n\ninterface SliderBaseProps {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n showValue?: boolean;\n tone?: \"accent\" | \"success\" | \"warning\" | \"danger\";\n /** Tick marks with labels. Clicking a mark snaps to it. */\n marks?: Record<number, React.ReactNode>;\n className?: string;\n}\n\nexport interface SliderSingleProps extends SliderBaseProps {\n range?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number) => void;\n}\n\nexport interface SliderRangeProps extends SliderBaseProps {\n range: true;\n value?: SliderRangeValue;\n defaultValue?: SliderRangeValue;\n onChange?: (value: SliderRangeValue) => void;\n}\n\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\nconst asArray = (v: SliderValue | undefined, fallback: number): number[] => {\n if (v === undefined) return [fallback];\n return Array.isArray(v) ? [...v] : [v];\n};\n\n/** `Slider` — neumorphic range input with grooved track. */\nexport const Slider: React.FC<SliderProps> = (props) => {\n const {\n min = 0,\n max = 100,\n step = 1,\n disabled,\n showValue,\n tone = \"accent\",\n marks,\n className = \"\",\n } = props;\n\n const range = (props as SliderRangeProps).range === true;\n const value = (props as { value?: SliderValue }).value;\n const defaultValue = (props as { defaultValue?: SliderValue }).defaultValue;\n const onChange = (props as { onChange?: (v: SliderValue) => void }).onChange;\n\n const initial = React.useMemo<number[]>(() => {\n if (defaultValue !== undefined) return asArray(defaultValue, 0);\n return range ? [min, max] : [0];\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const [inner, setInner] = React.useState<number[]>(initial);\n const isControlled = value !== undefined;\n const nums = isControlled ? asArray(value, range ? min : 0) : inner;\n\n const pctOf = (n: number) => ((n - min) / (max - min)) * 100;\n\n const emit = (arr: number[]) => {\n if (range) {\n onChange?.([arr[0], arr[1]] as SliderRangeValue);\n } else {\n onChange?.(arr[0]);\n }\n };\n\n const updateAt = (index: number, next: number) => {\n const clamped = Math.max(min, Math.min(max, next));\n const out = [...nums];\n out[index] = clamped;\n if (range && out.length === 2 && out[0] > out[1]) {\n out.sort((a, b) => a - b);\n }\n if (!isControlled) setInner(out);\n emit(out);\n };\n\n const handleMarkClick = (mark: number) => {\n if (disabled) return;\n if (!range) {\n updateAt(0, mark);\n return;\n }\n const [a, b] = nums;\n const closerIndex = Math.abs(a - mark) <= Math.abs(b - mark) ? 0 : 1;\n updateAt(closerIndex, mark);\n };\n\n const fillLeft = range ? pctOf(Math.min(nums[0], nums[1])) : 0;\n const fillRight = range\n ? 100 - pctOf(Math.max(nums[0], nums[1]))\n : 100 - pctOf(nums[0]);\n\n return (\n <div className={`slider ${tone} ${disabled ? \"disabled\" : \"\"} ${marks ? \"has-marks\" : \"\"} ${className}`}>\n <div className=\"slider-track\">\n <div\n className=\"slider-fill\"\n style={{ left: `${fillLeft}%`, right: `${fillRight}%` }}\n />\n </div>\n {nums.map((n, i) => (\n <React.Fragment key={i}>\n <div className=\"slider-thumb\" style={{ left: `${pctOf(n)}%` }} />\n <input\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={n}\n disabled={disabled}\n onChange={(e) => updateAt(i, Number(e.target.value))}\n />\n </React.Fragment>\n ))}\n {showValue && (\n <span className=\"slider-value\">\n {range ? `${nums[0]} – ${nums[1]}` : nums[0]}\n </span>\n )}\n {marks && (\n <div className=\"slider-marks\">\n {Object.entries(marks).map(([k, label]) => {\n const n = Number(k);\n const left = pctOf(n);\n const active = range\n ? n >= Math.min(nums[0], nums[1]) && n <= Math.max(nums[0], nums[1])\n : n <= nums[0];\n return (\n <span\n key={k}\n className={`slider-mark ${active ? \"active\" : \"\"}`}\n style={{ left: `${left}%` }}\n onClick={() => handleMarkClick(n)}\n >\n <span className=\"slider-mark-dot\" />\n <span className=\"slider-mark-label\">{label}</span>\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n"]}
|
package/dist/chunk-QJGKI2BD.js
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import './tokens-BIIUTPKN.css';
|
|
2
|
-
import './shared-NJHRNLRH.css';
|
|
3
|
-
import './Slider-X4PVA65R.css';
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
// src/components/Slider/Slider.tsx
|
|
8
|
-
var asArray = (v, fallback) => {
|
|
9
|
-
if (v === void 0) return [fallback];
|
|
10
|
-
return Array.isArray(v) ? [...v] : [v];
|
|
11
|
-
};
|
|
12
|
-
var Slider = (props) => {
|
|
13
|
-
const {
|
|
14
|
-
min = 0,
|
|
15
|
-
max = 100,
|
|
16
|
-
step = 1,
|
|
17
|
-
disabled,
|
|
18
|
-
showValue,
|
|
19
|
-
tone = "accent",
|
|
20
|
-
marks,
|
|
21
|
-
className = ""
|
|
22
|
-
} = props;
|
|
23
|
-
const range = props.range === true;
|
|
24
|
-
const value = props.value;
|
|
25
|
-
const defaultValue = props.defaultValue;
|
|
26
|
-
const onChange = props.onChange;
|
|
27
|
-
const initial = React.useMemo(() => {
|
|
28
|
-
if (defaultValue !== void 0) return asArray(defaultValue, 0);
|
|
29
|
-
return range ? [min, max] : [0];
|
|
30
|
-
}, []);
|
|
31
|
-
const [inner, setInner] = React.useState(initial);
|
|
32
|
-
const isControlled = value !== void 0;
|
|
33
|
-
const nums = isControlled ? asArray(value, range ? min : 0) : inner;
|
|
34
|
-
const pctOf = (n) => (n - min) / (max - min) * 100;
|
|
35
|
-
const emit = (arr) => {
|
|
36
|
-
if (range) {
|
|
37
|
-
onChange?.([arr[0], arr[1]]);
|
|
38
|
-
} else {
|
|
39
|
-
onChange?.(arr[0]);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
const updateAt = (index, next) => {
|
|
43
|
-
const clamped = Math.max(min, Math.min(max, next));
|
|
44
|
-
const out = [...nums];
|
|
45
|
-
out[index] = clamped;
|
|
46
|
-
if (range && out.length === 2 && out[0] > out[1]) {
|
|
47
|
-
out.sort((a, b) => a - b);
|
|
48
|
-
}
|
|
49
|
-
if (!isControlled) setInner(out);
|
|
50
|
-
emit(out);
|
|
51
|
-
};
|
|
52
|
-
const handleMarkClick = (mark) => {
|
|
53
|
-
if (disabled) return;
|
|
54
|
-
if (!range) {
|
|
55
|
-
updateAt(0, mark);
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
const [a, b] = nums;
|
|
59
|
-
const closerIndex = Math.abs(a - mark) <= Math.abs(b - mark) ? 0 : 1;
|
|
60
|
-
updateAt(closerIndex, mark);
|
|
61
|
-
};
|
|
62
|
-
const fillLeft = range ? pctOf(Math.min(nums[0], nums[1])) : 0;
|
|
63
|
-
const fillRight = range ? 100 - pctOf(Math.max(nums[0], nums[1])) : 100 - pctOf(nums[0]);
|
|
64
|
-
return /* @__PURE__ */ jsxs("div", { className: `slider ${tone} ${disabled ? "disabled" : ""} ${marks ? "has-marks" : ""} ${className}`, children: [
|
|
65
|
-
/* @__PURE__ */ jsx("div", { className: "slider-track", children: /* @__PURE__ */ jsx(
|
|
66
|
-
"div",
|
|
67
|
-
{
|
|
68
|
-
className: "slider-fill",
|
|
69
|
-
style: { left: `${fillLeft}%`, right: `${fillRight}%` }
|
|
70
|
-
}
|
|
71
|
-
) }),
|
|
72
|
-
nums.map((n, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
73
|
-
/* @__PURE__ */ jsx("div", { className: "slider-thumb", style: { left: `${pctOf(n)}%` } }),
|
|
74
|
-
/* @__PURE__ */ jsx(
|
|
75
|
-
"input",
|
|
76
|
-
{
|
|
77
|
-
type: "range",
|
|
78
|
-
min,
|
|
79
|
-
max,
|
|
80
|
-
step,
|
|
81
|
-
value: n,
|
|
82
|
-
disabled,
|
|
83
|
-
onChange: (e) => updateAt(i, Number(e.target.value))
|
|
84
|
-
}
|
|
85
|
-
)
|
|
86
|
-
] }, i)),
|
|
87
|
-
showValue && /* @__PURE__ */ jsx("span", { className: "slider-value", children: range ? `${nums[0]} \u2013 ${nums[1]}` : nums[0] }),
|
|
88
|
-
marks && /* @__PURE__ */ jsx("div", { className: "slider-marks", children: Object.entries(marks).map(([k, label]) => {
|
|
89
|
-
const n = Number(k);
|
|
90
|
-
const left = pctOf(n);
|
|
91
|
-
const active = range ? n >= Math.min(nums[0], nums[1]) && n <= Math.max(nums[0], nums[1]) : n <= nums[0];
|
|
92
|
-
return /* @__PURE__ */ jsxs(
|
|
93
|
-
"span",
|
|
94
|
-
{
|
|
95
|
-
className: `slider-mark ${active ? "active" : ""}`,
|
|
96
|
-
style: { left: `${left}%` },
|
|
97
|
-
onClick: () => handleMarkClick(n),
|
|
98
|
-
children: [
|
|
99
|
-
/* @__PURE__ */ jsx("span", { className: "slider-mark-dot" }),
|
|
100
|
-
/* @__PURE__ */ jsx("span", { className: "slider-mark-label", children: label })
|
|
101
|
-
]
|
|
102
|
-
},
|
|
103
|
-
k
|
|
104
|
-
);
|
|
105
|
-
}) })
|
|
106
|
-
] });
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
export { Slider };
|
|
110
|
-
//# sourceMappingURL=chunk-QJGKI2BD.js.map
|
|
111
|
-
//# sourceMappingURL=chunk-QJGKI2BD.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","file":"chunk-QJGKI2BD.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Slider.css\";\nimport * as React from \"react\";\n\nexport type SliderSingleValue = number;\nexport type SliderRangeValue = [number, number];\nexport type SliderValue = SliderSingleValue | SliderRangeValue;\n\ninterface SliderBaseProps {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n showValue?: boolean;\n tone?: \"accent\" | \"success\" | \"warning\" | \"danger\";\n /** Tick marks with labels. Clicking a mark snaps to it. */\n marks?: Record<number, React.ReactNode>;\n className?: string;\n}\n\nexport interface SliderSingleProps extends SliderBaseProps {\n range?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number) => void;\n}\n\nexport interface SliderRangeProps extends SliderBaseProps {\n range: true;\n value?: SliderRangeValue;\n defaultValue?: SliderRangeValue;\n onChange?: (value: SliderRangeValue) => void;\n}\n\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\nconst asArray = (v: SliderValue | undefined, fallback: number): number[] => {\n if (v === undefined) return [fallback];\n return Array.isArray(v) ? [...v] : [v];\n};\n\n/** `Slider` — neumorphic range input with grooved track. */\nexport const Slider: React.FC<SliderProps> = (props) => {\n const {\n min = 0,\n max = 100,\n step = 1,\n disabled,\n showValue,\n tone = \"accent\",\n marks,\n className = \"\",\n } = props;\n\n const range = (props as SliderRangeProps).range === true;\n const value = (props as { value?: SliderValue }).value;\n const defaultValue = (props as { defaultValue?: SliderValue }).defaultValue;\n const onChange = (props as { onChange?: (v: SliderValue) => void }).onChange;\n\n const initial = React.useMemo<number[]>(() => {\n if (defaultValue !== undefined) return asArray(defaultValue, 0);\n return range ? [min, max] : [0];\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const [inner, setInner] = React.useState<number[]>(initial);\n const isControlled = value !== undefined;\n const nums = isControlled ? asArray(value, range ? min : 0) : inner;\n\n const pctOf = (n: number) => ((n - min) / (max - min)) * 100;\n\n const emit = (arr: number[]) => {\n if (range) {\n onChange?.([arr[0], arr[1]] as SliderRangeValue);\n } else {\n onChange?.(arr[0]);\n }\n };\n\n const updateAt = (index: number, next: number) => {\n const clamped = Math.max(min, Math.min(max, next));\n const out = [...nums];\n out[index] = clamped;\n if (range && out.length === 2 && out[0] > out[1]) {\n out.sort((a, b) => a - b);\n }\n if (!isControlled) setInner(out);\n emit(out);\n };\n\n const handleMarkClick = (mark: number) => {\n if (disabled) return;\n if (!range) {\n updateAt(0, mark);\n return;\n }\n const [a, b] = nums;\n const closerIndex = Math.abs(a - mark) <= Math.abs(b - mark) ? 0 : 1;\n updateAt(closerIndex, mark);\n };\n\n const fillLeft = range ? pctOf(Math.min(nums[0], nums[1])) : 0;\n const fillRight = range\n ? 100 - pctOf(Math.max(nums[0], nums[1]))\n : 100 - pctOf(nums[0]);\n\n return (\n <div className={`slider ${tone} ${disabled ? \"disabled\" : \"\"} ${marks ? \"has-marks\" : \"\"} ${className}`}>\n <div className=\"slider-track\">\n <div\n className=\"slider-fill\"\n style={{ left: `${fillLeft}%`, right: `${fillRight}%` }}\n />\n </div>\n {nums.map((n, i) => (\n <React.Fragment key={i}>\n <div className=\"slider-thumb\" style={{ left: `${pctOf(n)}%` }} />\n <input\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={n}\n disabled={disabled}\n onChange={(e) => updateAt(i, Number(e.target.value))}\n />\n </React.Fragment>\n ))}\n {showValue && (\n <span className=\"slider-value\">\n {range ? `${nums[0]} – ${nums[1]}` : nums[0]}\n </span>\n )}\n {marks && (\n <div className=\"slider-marks\">\n {Object.entries(marks).map(([k, label]) => {\n const n = Number(k);\n const left = pctOf(n);\n const active = range\n ? n >= Math.min(nums[0], nums[1]) && n <= Math.max(nums[0], nums[1])\n : n <= nums[0];\n return (\n <span\n key={k}\n className={`slider-mark ${active ? \"active\" : \"\"}`}\n style={{ left: `${left}%` }}\n onClick={() => handleMarkClick(n)}\n >\n <span className=\"slider-mark-dot\" />\n <span className=\"slider-mark-label\">{label}</span>\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n"]}
|