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