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