@radix-ui/react-slider 1.2.0-rc.3 → 1.2.0-rc.5
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/index.d.mts +34 -22
- package/dist/index.d.ts +34 -22
- package/dist/index.js +521 -584
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +496 -564
- package/dist/index.mjs.map +7 -1
- package/package.json +12 -13
- package/dist/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,633 +1,570 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
(() => {
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
11
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
12
|
+
}) : x)(function(x) {
|
|
13
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
14
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
15
|
+
});
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from))
|
|
19
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
20
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
30
|
+
mod
|
|
31
|
+
));
|
|
41
32
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
const [values = [], setValues] = $inrcs$radixuireactusecontrollablestate.useControllableState({
|
|
95
|
-
prop: value1,
|
|
33
|
+
// packages/react/slider/src/Slider.tsx
|
|
34
|
+
var React = __toESM(__require("react"));
|
|
35
|
+
var import_number = __require("@radix-ui/number");
|
|
36
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
37
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
38
|
+
var import_react_context = __require("@radix-ui/react-context");
|
|
39
|
+
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
|
|
40
|
+
var import_react_direction = __require("@radix-ui/react-direction");
|
|
41
|
+
var import_react_use_previous = __require("@radix-ui/react-use-previous");
|
|
42
|
+
var import_react_use_size = __require("@radix-ui/react-use-size");
|
|
43
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
44
|
+
var import_react_collection = __require("@radix-ui/react-collection");
|
|
45
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
46
|
+
var PAGE_KEYS = ["PageUp", "PageDown"];
|
|
47
|
+
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
48
|
+
var BACK_KEYS = {
|
|
49
|
+
"from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
|
|
50
|
+
"from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
|
|
51
|
+
"from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
|
|
52
|
+
"from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
|
|
53
|
+
};
|
|
54
|
+
var SLIDER_NAME = "Slider";
|
|
55
|
+
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(SLIDER_NAME);
|
|
56
|
+
var [createSliderContext, createSliderScope] = (0, import_react_context.createContextScope)(SLIDER_NAME, [
|
|
57
|
+
createCollectionScope
|
|
58
|
+
]);
|
|
59
|
+
var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
|
|
60
|
+
var Slider = React.forwardRef(
|
|
61
|
+
(props, forwardedRef) => {
|
|
62
|
+
const {
|
|
63
|
+
name,
|
|
64
|
+
min = 0,
|
|
65
|
+
max = 100,
|
|
66
|
+
step = 1,
|
|
67
|
+
orientation = "horizontal",
|
|
68
|
+
disabled = false,
|
|
69
|
+
minStepsBetweenThumbs = 0,
|
|
70
|
+
defaultValue = [min],
|
|
71
|
+
value,
|
|
72
|
+
onValueChange = () => {
|
|
73
|
+
},
|
|
74
|
+
onValueCommit = () => {
|
|
75
|
+
},
|
|
76
|
+
inverted = false,
|
|
77
|
+
...sliderProps
|
|
78
|
+
} = props;
|
|
79
|
+
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
80
|
+
const valueIndexToChangeRef = React.useRef(0);
|
|
81
|
+
const isHorizontal = orientation === "horizontal";
|
|
82
|
+
const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
83
|
+
const [values = [], setValues] = (0, import_react_use_controllable_state.useControllableState)({
|
|
84
|
+
prop: value,
|
|
96
85
|
defaultProp: defaultValue,
|
|
97
|
-
onChange: (
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
];
|
|
102
|
-
(_thumbs$valueIndexToC = thumbs[valueIndexToChangeRef.current]) === null || _thumbs$valueIndexToC === void 0 || _thumbs$valueIndexToC.focus();
|
|
103
|
-
onValueChange(value);
|
|
86
|
+
onChange: (value2) => {
|
|
87
|
+
const thumbs = [...thumbRefs.current];
|
|
88
|
+
thumbs[valueIndexToChangeRef.current]?.focus();
|
|
89
|
+
onValueChange(value2);
|
|
104
90
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
const closestIndex =
|
|
109
|
-
updateValues(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
updateValues(
|
|
113
|
-
|
|
114
|
-
|
|
91
|
+
});
|
|
92
|
+
const valuesBeforeSlideStartRef = React.useRef(values);
|
|
93
|
+
function handleSlideStart(value2) {
|
|
94
|
+
const closestIndex = getClosestValueIndex(values, value2);
|
|
95
|
+
updateValues(value2, closestIndex);
|
|
96
|
+
}
|
|
97
|
+
function handleSlideMove(value2) {
|
|
98
|
+
updateValues(value2, valueIndexToChangeRef.current);
|
|
99
|
+
}
|
|
100
|
+
function handleSlideEnd() {
|
|
115
101
|
const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
|
|
116
102
|
const nextValue = values[valueIndexToChangeRef.current];
|
|
117
103
|
const hasChanged = nextValue !== prevValue;
|
|
118
104
|
if (hasChanged) onValueCommit(values);
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
const
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
if (hasChanged && commit) onValueCommit(nextValues);
|
|
135
|
-
return hasChanged ? nextValues : prevValues;
|
|
136
|
-
} else return prevValues;
|
|
105
|
+
}
|
|
106
|
+
function updateValues(value2, atIndex, { commit } = { commit: false }) {
|
|
107
|
+
const decimalCount = getDecimalCount(step);
|
|
108
|
+
const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
|
|
109
|
+
const nextValue = (0, import_number.clamp)(snapToStep, [min, max]);
|
|
110
|
+
setValues((prevValues = []) => {
|
|
111
|
+
const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
|
|
112
|
+
if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
|
|
113
|
+
valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
|
|
114
|
+
const hasChanged = String(nextValues) !== String(prevValues);
|
|
115
|
+
if (hasChanged && commit) onValueCommit(nextValues);
|
|
116
|
+
return hasChanged ? nextValues : prevValues;
|
|
117
|
+
} else {
|
|
118
|
+
return prevValues;
|
|
119
|
+
}
|
|
137
120
|
});
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
const atIndex = valueIndexToChangeRef.current;
|
|
181
|
-
const value = values[atIndex];
|
|
182
|
-
const stepInDirection = step * multiplier * stepDirection;
|
|
183
|
-
updateValues(value + stepInDirection, atIndex, {
|
|
184
|
-
commit: true
|
|
185
|
-
});
|
|
121
|
+
}
|
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
123
|
+
SliderProvider,
|
|
124
|
+
{
|
|
125
|
+
scope: props.__scopeSlider,
|
|
126
|
+
name,
|
|
127
|
+
disabled,
|
|
128
|
+
min,
|
|
129
|
+
max,
|
|
130
|
+
valueIndexToChangeRef,
|
|
131
|
+
thumbs: thumbRefs.current,
|
|
132
|
+
values,
|
|
133
|
+
orientation,
|
|
134
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
135
|
+
SliderOrientation,
|
|
136
|
+
{
|
|
137
|
+
"aria-disabled": disabled,
|
|
138
|
+
"data-disabled": disabled ? "" : void 0,
|
|
139
|
+
...sliderProps,
|
|
140
|
+
ref: forwardedRef,
|
|
141
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(sliderProps.onPointerDown, () => {
|
|
142
|
+
if (!disabled) valuesBeforeSlideStartRef.current = values;
|
|
143
|
+
}),
|
|
144
|
+
min,
|
|
145
|
+
max,
|
|
146
|
+
inverted,
|
|
147
|
+
onSlideStart: disabled ? void 0 : handleSlideStart,
|
|
148
|
+
onSlideMove: disabled ? void 0 : handleSlideMove,
|
|
149
|
+
onSlideEnd: disabled ? void 0 : handleSlideEnd,
|
|
150
|
+
onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
|
|
151
|
+
onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
|
|
152
|
+
onStepKeyDown: ({ event, direction: stepDirection }) => {
|
|
153
|
+
if (!disabled) {
|
|
154
|
+
const isPageKey = PAGE_KEYS.includes(event.key);
|
|
155
|
+
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
|
156
|
+
const multiplier = isSkipKey ? 10 : 1;
|
|
157
|
+
const atIndex = valueIndexToChangeRef.current;
|
|
158
|
+
const value2 = values[atIndex];
|
|
159
|
+
const stepInDirection = step * multiplier * stepDirection;
|
|
160
|
+
updateValues(value2 + stepInDirection, atIndex, { commit: true });
|
|
161
|
+
}
|
|
162
|
+
}
|
|
186
163
|
}
|
|
164
|
+
) }) })
|
|
187
165
|
}
|
|
188
|
-
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
startEdge: 'left',
|
|
197
|
-
endEdge: 'right',
|
|
198
|
-
size: 'width',
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
);
|
|
169
|
+
Slider.displayName = SLIDER_NAME;
|
|
170
|
+
var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
|
|
171
|
+
startEdge: "left",
|
|
172
|
+
endEdge: "right",
|
|
173
|
+
size: "width",
|
|
199
174
|
direction: 1
|
|
200
|
-
});
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
175
|
+
});
|
|
176
|
+
var SliderHorizontal = React.forwardRef(
|
|
177
|
+
(props, forwardedRef) => {
|
|
178
|
+
const {
|
|
179
|
+
min,
|
|
180
|
+
max,
|
|
181
|
+
dir,
|
|
182
|
+
inverted,
|
|
183
|
+
onSlideStart,
|
|
184
|
+
onSlideMove,
|
|
185
|
+
onSlideEnd,
|
|
186
|
+
onStepKeyDown,
|
|
187
|
+
...sliderProps
|
|
188
|
+
} = props;
|
|
189
|
+
const [slider, setSlider] = React.useState(null);
|
|
190
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setSlider(node));
|
|
191
|
+
const rectRef = React.useRef();
|
|
192
|
+
const direction = (0, import_react_direction.useDirection)(dir);
|
|
193
|
+
const isDirectionLTR = direction === "ltr";
|
|
194
|
+
const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
|
|
195
|
+
function getValueFromPointer(pointerPosition) {
|
|
211
196
|
const rect = rectRef.current || slider.getBoundingClientRect();
|
|
212
|
-
const input = [
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
];
|
|
216
|
-
const output = isSlidingFromLeft ? [
|
|
217
|
-
min,
|
|
218
|
-
max
|
|
219
|
-
] : [
|
|
220
|
-
max,
|
|
221
|
-
min
|
|
222
|
-
];
|
|
223
|
-
const value = $1791bb30e2e418d5$var$linearScale(input, output);
|
|
197
|
+
const input = [0, rect.width];
|
|
198
|
+
const output = isSlidingFromLeft ? [min, max] : [max, min];
|
|
199
|
+
const value = linearScale(input, output);
|
|
224
200
|
rectRef.current = rect;
|
|
225
201
|
return value(pointerPosition - rect.left);
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
202
|
+
}
|
|
203
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
204
|
+
SliderOrientationProvider,
|
|
205
|
+
{
|
|
206
|
+
scope: props.__scopeSlider,
|
|
207
|
+
startEdge: isSlidingFromLeft ? "left" : "right",
|
|
208
|
+
endEdge: isSlidingFromLeft ? "right" : "left",
|
|
209
|
+
direction: isSlidingFromLeft ? 1 : -1,
|
|
210
|
+
size: "width",
|
|
211
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
212
|
+
SliderImpl,
|
|
213
|
+
{
|
|
214
|
+
dir: direction,
|
|
215
|
+
"data-orientation": "horizontal",
|
|
216
|
+
...sliderProps,
|
|
217
|
+
ref: composedRefs,
|
|
218
|
+
style: {
|
|
219
|
+
...sliderProps.style,
|
|
220
|
+
["--radix-slider-thumb-transform"]: "translateX(-50%)"
|
|
221
|
+
},
|
|
222
|
+
onSlideStart: (event) => {
|
|
223
|
+
const value = getValueFromPointer(event.clientX);
|
|
224
|
+
onSlideStart?.(value);
|
|
225
|
+
},
|
|
226
|
+
onSlideMove: (event) => {
|
|
227
|
+
const value = getValueFromPointer(event.clientX);
|
|
228
|
+
onSlideMove?.(value);
|
|
229
|
+
},
|
|
230
|
+
onSlideEnd: () => {
|
|
231
|
+
rectRef.current = void 0;
|
|
232
|
+
onSlideEnd?.();
|
|
233
|
+
},
|
|
234
|
+
onStepKeyDown: (event) => {
|
|
235
|
+
const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
|
|
236
|
+
const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
|
|
237
|
+
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
)
|
|
261
241
|
}
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
);
|
|
245
|
+
var SliderVertical = React.forwardRef(
|
|
246
|
+
(props, forwardedRef) => {
|
|
247
|
+
const {
|
|
248
|
+
min,
|
|
249
|
+
max,
|
|
250
|
+
inverted,
|
|
251
|
+
onSlideStart,
|
|
252
|
+
onSlideMove,
|
|
253
|
+
onSlideEnd,
|
|
254
|
+
onStepKeyDown,
|
|
255
|
+
...sliderProps
|
|
256
|
+
} = props;
|
|
257
|
+
const sliderRef = React.useRef(null);
|
|
258
|
+
const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, sliderRef);
|
|
259
|
+
const rectRef = React.useRef();
|
|
260
|
+
const isSlidingFromBottom = !inverted;
|
|
261
|
+
function getValueFromPointer(pointerPosition) {
|
|
273
262
|
const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
|
|
274
|
-
const input = [
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
];
|
|
278
|
-
const output = isSlidingFromBottom ? [
|
|
279
|
-
max,
|
|
280
|
-
min
|
|
281
|
-
] : [
|
|
282
|
-
min,
|
|
283
|
-
max
|
|
284
|
-
];
|
|
285
|
-
const value = $1791bb30e2e418d5$var$linearScale(input, output);
|
|
263
|
+
const input = [0, rect.height];
|
|
264
|
+
const output = isSlidingFromBottom ? [max, min] : [min, max];
|
|
265
|
+
const value = linearScale(input, output);
|
|
286
266
|
rectRef.current = rect;
|
|
287
267
|
return value(pointerPosition - rect.top);
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
268
|
+
}
|
|
269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
270
|
+
SliderOrientationProvider,
|
|
271
|
+
{
|
|
272
|
+
scope: props.__scopeSlider,
|
|
273
|
+
startEdge: isSlidingFromBottom ? "bottom" : "top",
|
|
274
|
+
endEdge: isSlidingFromBottom ? "top" : "bottom",
|
|
275
|
+
size: "height",
|
|
276
|
+
direction: isSlidingFromBottom ? 1 : -1,
|
|
277
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
278
|
+
SliderImpl,
|
|
279
|
+
{
|
|
280
|
+
"data-orientation": "vertical",
|
|
281
|
+
...sliderProps,
|
|
282
|
+
ref,
|
|
283
|
+
style: {
|
|
284
|
+
...sliderProps.style,
|
|
285
|
+
["--radix-slider-thumb-transform"]: "translateY(50%)"
|
|
286
|
+
},
|
|
287
|
+
onSlideStart: (event) => {
|
|
288
|
+
const value = getValueFromPointer(event.clientY);
|
|
289
|
+
onSlideStart?.(value);
|
|
290
|
+
},
|
|
291
|
+
onSlideMove: (event) => {
|
|
292
|
+
const value = getValueFromPointer(event.clientY);
|
|
293
|
+
onSlideMove?.(value);
|
|
294
|
+
},
|
|
295
|
+
onSlideEnd: () => {
|
|
296
|
+
rectRef.current = void 0;
|
|
297
|
+
onSlideEnd?.();
|
|
298
|
+
},
|
|
299
|
+
onStepKeyDown: (event) => {
|
|
300
|
+
const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
|
|
301
|
+
const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
|
|
302
|
+
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
)
|
|
322
306
|
}
|
|
323
|
-
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
307
|
+
);
|
|
308
|
+
}
|
|
309
|
+
);
|
|
310
|
+
var SliderImpl = React.forwardRef(
|
|
311
|
+
(props, forwardedRef) => {
|
|
312
|
+
const {
|
|
313
|
+
__scopeSlider,
|
|
314
|
+
onSlideStart,
|
|
315
|
+
onSlideMove,
|
|
316
|
+
onSlideEnd,
|
|
317
|
+
onHomeKeyDown,
|
|
318
|
+
onEndKeyDown,
|
|
319
|
+
onStepKeyDown,
|
|
320
|
+
...sliderProps
|
|
321
|
+
} = props;
|
|
322
|
+
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
324
|
+
import_react_primitive.Primitive.span,
|
|
325
|
+
{
|
|
326
|
+
...sliderProps,
|
|
327
|
+
ref: forwardedRef,
|
|
328
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
329
|
+
if (event.key === "Home") {
|
|
330
|
+
onHomeKeyDown(event);
|
|
331
|
+
event.preventDefault();
|
|
332
|
+
} else if (event.key === "End") {
|
|
333
|
+
onEndKeyDown(event);
|
|
334
|
+
event.preventDefault();
|
|
335
|
+
} else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
|
|
336
|
+
onStepKeyDown(event);
|
|
337
|
+
event.preventDefault();
|
|
342
338
|
}
|
|
343
|
-
|
|
344
|
-
|
|
339
|
+
}),
|
|
340
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
|
|
345
341
|
const target = event.target;
|
|
346
|
-
target.setPointerCapture(event.pointerId);
|
|
347
|
-
event.preventDefault();
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
else
|
|
351
|
-
|
|
352
|
-
|
|
342
|
+
target.setPointerCapture(event.pointerId);
|
|
343
|
+
event.preventDefault();
|
|
344
|
+
if (context.thumbs.has(target)) {
|
|
345
|
+
target.focus();
|
|
346
|
+
} else {
|
|
347
|
+
onSlideStart(event);
|
|
348
|
+
}
|
|
349
|
+
}),
|
|
350
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
|
|
353
351
|
const target = event.target;
|
|
354
352
|
if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
|
|
355
|
-
|
|
356
|
-
|
|
353
|
+
}),
|
|
354
|
+
onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
|
|
357
355
|
const target = event.target;
|
|
358
356
|
if (target.hasPointerCapture(event.pointerId)) {
|
|
359
|
-
|
|
360
|
-
|
|
357
|
+
target.releasePointerCapture(event.pointerId);
|
|
358
|
+
onSlideEnd(event);
|
|
361
359
|
}
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
360
|
+
})
|
|
361
|
+
}
|
|
362
|
+
);
|
|
363
|
+
}
|
|
364
|
+
);
|
|
365
|
+
var TRACK_NAME = "SliderTrack";
|
|
366
|
+
var SliderTrack = React.forwardRef(
|
|
367
|
+
(props, forwardedRef) => {
|
|
368
|
+
const { __scopeSlider, ...trackProps } = props;
|
|
369
|
+
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
371
|
+
import_react_primitive.Primitive.span,
|
|
372
|
+
{
|
|
373
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
374
|
+
"data-orientation": context.orientation,
|
|
375
|
+
...trackProps,
|
|
376
|
+
ref: forwardedRef
|
|
377
|
+
}
|
|
378
|
+
);
|
|
379
|
+
}
|
|
380
|
+
);
|
|
381
|
+
SliderTrack.displayName = TRACK_NAME;
|
|
382
|
+
var RANGE_NAME = "SliderRange";
|
|
383
|
+
var SliderRange = React.forwardRef(
|
|
384
|
+
(props, forwardedRef) => {
|
|
385
|
+
const { __scopeSlider, ...rangeProps } = props;
|
|
386
|
+
const context = useSliderContext(RANGE_NAME, __scopeSlider);
|
|
387
|
+
const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
|
|
388
|
+
const ref = React.useRef(null);
|
|
389
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
390
|
+
const valuesCount = context.values.length;
|
|
391
|
+
const percentages = context.values.map(
|
|
392
|
+
(value) => convertValueToPercentage(value, context.min, context.max)
|
|
393
|
+
);
|
|
394
|
+
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
395
|
+
const offsetEnd = 100 - Math.max(...percentages);
|
|
396
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
397
|
+
import_react_primitive.Primitive.span,
|
|
398
|
+
{
|
|
399
|
+
"data-orientation": context.orientation,
|
|
400
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
401
|
+
...rangeProps,
|
|
402
|
+
ref: composedRefs,
|
|
403
|
+
style: {
|
|
401
404
|
...props.style,
|
|
402
|
-
[orientation.startEdge]: offsetStart +
|
|
403
|
-
[orientation.endEdge]: offsetEnd +
|
|
405
|
+
[orientation.startEdge]: offsetStart + "%",
|
|
406
|
+
[orientation.endEdge]: offsetEnd + "%"
|
|
407
|
+
}
|
|
404
408
|
}
|
|
405
|
-
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
const
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
const
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
const size = $inrcs$radixuireactusesize.useSize(thumb); // We cast because index could be `-1` which would return undefined
|
|
438
|
-
const value = context.values[index];
|
|
439
|
-
const percent = value === undefined ? 0 : $1791bb30e2e418d5$var$convertValueToPercentage(value, context.min, context.max);
|
|
440
|
-
const label = $1791bb30e2e418d5$var$getLabel(index, context.values.length);
|
|
441
|
-
const orientationSize = size === null || size === void 0 ? void 0 : size[orientation.size];
|
|
442
|
-
const thumbInBoundsOffset = orientationSize ? $1791bb30e2e418d5$var$getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
|
|
443
|
-
$inrcs$react.useEffect(()=>{
|
|
409
|
+
);
|
|
410
|
+
}
|
|
411
|
+
);
|
|
412
|
+
SliderRange.displayName = RANGE_NAME;
|
|
413
|
+
var THUMB_NAME = "SliderThumb";
|
|
414
|
+
var SliderThumb = React.forwardRef(
|
|
415
|
+
(props, forwardedRef) => {
|
|
416
|
+
const getItems = useCollection(props.__scopeSlider);
|
|
417
|
+
const [thumb, setThumb] = React.useState(null);
|
|
418
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
|
|
419
|
+
const index = React.useMemo(
|
|
420
|
+
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
|
421
|
+
[getItems, thumb]
|
|
422
|
+
);
|
|
423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
|
424
|
+
}
|
|
425
|
+
);
|
|
426
|
+
var SliderThumbImpl = React.forwardRef(
|
|
427
|
+
(props, forwardedRef) => {
|
|
428
|
+
const { __scopeSlider, index, name, ...thumbProps } = props;
|
|
429
|
+
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
|
430
|
+
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
|
431
|
+
const [thumb, setThumb] = React.useState(null);
|
|
432
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
|
|
433
|
+
const isFormControl = thumb ? Boolean(thumb.closest("form")) : true;
|
|
434
|
+
const size = (0, import_react_use_size.useSize)(thumb);
|
|
435
|
+
const value = context.values[index];
|
|
436
|
+
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
|
437
|
+
const label = getLabel(index, context.values.length);
|
|
438
|
+
const orientationSize = size?.[orientation.size];
|
|
439
|
+
const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
|
|
440
|
+
React.useEffect(() => {
|
|
444
441
|
if (thumb) {
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
442
|
+
context.thumbs.add(thumb);
|
|
443
|
+
return () => {
|
|
444
|
+
context.thumbs.delete(thumb);
|
|
445
|
+
};
|
|
449
446
|
}
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
position: 'absolute',
|
|
447
|
+
}, [thumb, context.thumbs]);
|
|
448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
449
|
+
"span",
|
|
450
|
+
{
|
|
451
|
+
style: {
|
|
452
|
+
transform: "var(--radix-slider-thumb-transform)",
|
|
453
|
+
position: "absolute",
|
|
458
454
|
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
455
|
+
},
|
|
456
|
+
children: [
|
|
457
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
458
|
+
import_react_primitive.Primitive.span,
|
|
459
|
+
{
|
|
460
|
+
role: "slider",
|
|
461
|
+
"aria-label": props["aria-label"] || label,
|
|
462
|
+
"aria-valuemin": context.min,
|
|
463
|
+
"aria-valuenow": value,
|
|
464
|
+
"aria-valuemax": context.max,
|
|
465
|
+
"aria-orientation": context.orientation,
|
|
466
|
+
"data-orientation": context.orientation,
|
|
467
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
468
|
+
tabIndex: context.disabled ? void 0 : 0,
|
|
469
|
+
...thumbProps,
|
|
470
|
+
ref: composedRefs,
|
|
471
|
+
style: value === void 0 ? { display: "none" } : props.style,
|
|
472
|
+
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
|
|
473
|
+
context.valueIndexToChangeRef.current = index;
|
|
474
|
+
})
|
|
475
|
+
}
|
|
476
|
+
) }),
|
|
477
|
+
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
478
|
+
BubbleInput,
|
|
479
|
+
{
|
|
480
|
+
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
|
481
|
+
value
|
|
482
|
+
},
|
|
483
|
+
index
|
|
484
|
+
)
|
|
485
|
+
]
|
|
459
486
|
}
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
value: value
|
|
484
|
-
}));
|
|
485
|
-
});
|
|
486
|
-
/*#__PURE__*/ Object.assign($1791bb30e2e418d5$export$2c1b491743890dec, {
|
|
487
|
-
displayName: $1791bb30e2e418d5$var$THUMB_NAME
|
|
488
|
-
});
|
|
489
|
-
/* -----------------------------------------------------------------------------------------------*/ const $1791bb30e2e418d5$var$BubbleInput = (props)=>{
|
|
490
|
-
const { value: value , ...inputProps } = props;
|
|
491
|
-
const ref = $inrcs$react.useRef(null);
|
|
492
|
-
const prevValue = $inrcs$radixuireactuseprevious.usePrevious(value); // Bubble value change to parents (e.g form change event)
|
|
493
|
-
$inrcs$react.useEffect(()=>{
|
|
494
|
-
const input = ref.current;
|
|
495
|
-
const inputProto = window.HTMLInputElement.prototype;
|
|
496
|
-
const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value');
|
|
497
|
-
const setValue = descriptor.set;
|
|
498
|
-
if (prevValue !== value && setValue) {
|
|
499
|
-
const event = new Event('input', {
|
|
500
|
-
bubbles: true
|
|
501
|
-
});
|
|
502
|
-
setValue.call(input, value);
|
|
503
|
-
input.dispatchEvent(event);
|
|
504
|
-
}
|
|
505
|
-
}, [
|
|
506
|
-
prevValue,
|
|
507
|
-
value
|
|
508
|
-
]);
|
|
509
|
-
/**
|
|
510
|
-
* We purposefully do not use `type="hidden"` here otherwise forms that
|
|
511
|
-
* wrap it will not be able to access its value via the FormData API.
|
|
512
|
-
*
|
|
513
|
-
* We purposefully do not add the `value` attribute here to allow the value
|
|
514
|
-
* to be set programatically and bubble to any parent form `onChange` event.
|
|
515
|
-
* Adding the `value` will cause React to consider the programatic
|
|
516
|
-
* dispatch a duplicate and it will get swallowed.
|
|
517
|
-
*/ return /*#__PURE__*/ $inrcs$react.createElement("input", ($parcel$interopDefault($inrcs$babelruntimehelpersextends))({
|
|
518
|
-
style: {
|
|
519
|
-
display: 'none'
|
|
520
|
-
}
|
|
521
|
-
}, inputProps, {
|
|
522
|
-
ref: ref,
|
|
523
|
-
defaultValue: value
|
|
524
|
-
}));
|
|
525
|
-
};
|
|
526
|
-
function $1791bb30e2e418d5$var$getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
527
|
-
const nextValues = [
|
|
528
|
-
...prevValues
|
|
529
|
-
];
|
|
487
|
+
);
|
|
488
|
+
}
|
|
489
|
+
);
|
|
490
|
+
SliderThumb.displayName = THUMB_NAME;
|
|
491
|
+
var BubbleInput = (props) => {
|
|
492
|
+
const { value, ...inputProps } = props;
|
|
493
|
+
const ref = React.useRef(null);
|
|
494
|
+
const prevValue = (0, import_react_use_previous.usePrevious)(value);
|
|
495
|
+
React.useEffect(() => {
|
|
496
|
+
const input = ref.current;
|
|
497
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
498
|
+
const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
|
|
499
|
+
const setValue = descriptor.set;
|
|
500
|
+
if (prevValue !== value && setValue) {
|
|
501
|
+
const event = new Event("input", { bubbles: true });
|
|
502
|
+
setValue.call(input, value);
|
|
503
|
+
input.dispatchEvent(event);
|
|
504
|
+
}
|
|
505
|
+
}, [prevValue, value]);
|
|
506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: { display: "none" }, ...inputProps, ref, defaultValue: value });
|
|
507
|
+
};
|
|
508
|
+
function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
509
|
+
const nextValues = [...prevValues];
|
|
530
510
|
nextValues[atIndex] = nextValue;
|
|
531
|
-
return nextValues.sort((a, b)=>a - b
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
function $1791bb30e2e418d5$var$convertValueToPercentage(value, min, max) {
|
|
511
|
+
return nextValues.sort((a, b) => a - b);
|
|
512
|
+
}
|
|
513
|
+
function convertValueToPercentage(value, min, max) {
|
|
535
514
|
const maxSteps = max - min;
|
|
536
515
|
const percentPerStep = 100 / maxSteps;
|
|
537
516
|
const percentage = percentPerStep * (value - min);
|
|
538
|
-
return
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
][index];
|
|
551
|
-
else return undefined;
|
|
552
|
-
}
|
|
553
|
-
/**
|
|
554
|
-
* Given a `values` array and a `nextValue`, determine which value in
|
|
555
|
-
* the array is closest to `nextValue` and return its index.
|
|
556
|
-
*
|
|
557
|
-
* @example
|
|
558
|
-
* // returns 1
|
|
559
|
-
* getClosestValueIndex([10, 30], 25);
|
|
560
|
-
*/ function $1791bb30e2e418d5$var$getClosestValueIndex(values, nextValue) {
|
|
517
|
+
return (0, import_number.clamp)(percentage, [0, 100]);
|
|
518
|
+
}
|
|
519
|
+
function getLabel(index, totalValues) {
|
|
520
|
+
if (totalValues > 2) {
|
|
521
|
+
return `Value ${index + 1} of ${totalValues}`;
|
|
522
|
+
} else if (totalValues === 2) {
|
|
523
|
+
return ["Minimum", "Maximum"][index];
|
|
524
|
+
} else {
|
|
525
|
+
return void 0;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
function getClosestValueIndex(values, nextValue) {
|
|
561
529
|
if (values.length === 1) return 0;
|
|
562
|
-
const distances = values.map((value)=>Math.abs(value - nextValue)
|
|
563
|
-
);
|
|
530
|
+
const distances = values.map((value) => Math.abs(value - nextValue));
|
|
564
531
|
const closestDistance = Math.min(...distances);
|
|
565
532
|
return distances.indexOf(closestDistance);
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
* Offsets the thumb centre point while sliding to ensure it remains
|
|
569
|
-
* within the bounds of the slider when reaching the edges
|
|
570
|
-
*/ function $1791bb30e2e418d5$var$getThumbInBoundsOffset(width, left, direction) {
|
|
533
|
+
}
|
|
534
|
+
function getThumbInBoundsOffset(width, left, direction) {
|
|
571
535
|
const halfWidth = width / 2;
|
|
572
536
|
const halfPercent = 50;
|
|
573
|
-
const offset =
|
|
574
|
-
0,
|
|
575
|
-
halfPercent
|
|
576
|
-
], [
|
|
577
|
-
0,
|
|
578
|
-
halfWidth
|
|
579
|
-
]);
|
|
537
|
+
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
580
538
|
return (halfWidth - offset(left) * direction) * direction;
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
* // returns [1, 9]
|
|
587
|
-
* getStepsBetweenValues([10, 11, 20]);
|
|
588
|
-
*/ function $1791bb30e2e418d5$var$getStepsBetweenValues(values) {
|
|
589
|
-
return values.slice(0, -1).map((value, index)=>values[index + 1] - value
|
|
590
|
-
);
|
|
591
|
-
}
|
|
592
|
-
/**
|
|
593
|
-
* Verifies the minimum steps between all values is greater than or equal
|
|
594
|
-
* to the expected minimum steps.
|
|
595
|
-
*
|
|
596
|
-
* @example
|
|
597
|
-
* // returns false
|
|
598
|
-
* hasMinStepsBetweenValues([1,2,3], 2);
|
|
599
|
-
*
|
|
600
|
-
* @example
|
|
601
|
-
* // returns true
|
|
602
|
-
* hasMinStepsBetweenValues([1,2,3], 1);
|
|
603
|
-
*/ function $1791bb30e2e418d5$var$hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
539
|
+
}
|
|
540
|
+
function getStepsBetweenValues(values) {
|
|
541
|
+
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
542
|
+
}
|
|
543
|
+
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
604
544
|
if (minStepsBetweenValues > 0) {
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
545
|
+
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
546
|
+
const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
|
|
547
|
+
return actualMinStepsBetweenValues >= minStepsBetweenValues;
|
|
608
548
|
}
|
|
609
549
|
return true;
|
|
610
|
-
}
|
|
611
|
-
function
|
|
612
|
-
return (value)=>{
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
550
|
+
}
|
|
551
|
+
function linearScale(input, output) {
|
|
552
|
+
return (value) => {
|
|
553
|
+
if (input[0] === input[1] || output[0] === output[1]) return output[0];
|
|
554
|
+
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
555
|
+
return output[0] + ratio * (value - input[0]);
|
|
616
556
|
};
|
|
617
|
-
}
|
|
618
|
-
function
|
|
619
|
-
return (String(value).split(
|
|
620
|
-
}
|
|
621
|
-
function
|
|
557
|
+
}
|
|
558
|
+
function getDecimalCount(value) {
|
|
559
|
+
return (String(value).split(".")[1] || "").length;
|
|
560
|
+
}
|
|
561
|
+
function roundValue(value, decimalCount) {
|
|
622
562
|
const rounder = Math.pow(10, decimalCount);
|
|
623
563
|
return Math.round(value * rounder) / rounder;
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
564
|
+
}
|
|
565
|
+
var Root = Slider;
|
|
566
|
+
var Track = SliderTrack;
|
|
567
|
+
var Range = SliderRange;
|
|
568
|
+
var Thumb = SliderThumb;
|
|
569
|
+
})();
|
|
633
570
|
//# sourceMappingURL=index.js.map
|