@rcarls/rc-range-slider 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,613 @@
1
+ import { LitElement as I, css as k, nothing as u, html as m } from "lit";
2
+ import { property as h, state as x } from "lit/decorators.js";
3
+ import { snapToStep as _, valueToPercent as b } from "@rcarls/rc-common";
4
+ var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (o, t, e, r) => {
5
+ for (var i = r > 1 ? void 0 : r ? $(t, e) : t, a = o.length - 1, l; a >= 0; a--)
6
+ (l = o[a]) && (i = (r ? l(t, e, i) : l(i)) || i);
7
+ return r && i && T(t, e, i), i;
8
+ };
9
+ const z = {
10
+ fromAttribute(o) {
11
+ return o === null ? null : o === "" || o === "float" ? "float" : o === "inline-start" ? "inline-start" : o === "inline-end" ? "inline-end" : null;
12
+ },
13
+ toAttribute(o) {
14
+ return o;
15
+ }
16
+ };
17
+ function v(o, t) {
18
+ if (o === "") return t;
19
+ const e = parseFloat(o);
20
+ return isNaN(e) ? t : e;
21
+ }
22
+ const f = class f extends I {
23
+ constructor() {
24
+ super(...arguments), this.min = 0, this.max = 100, this.step = 1, this._valueInitialized = !1, this.disabled = !1, this.readonly = !1, this.lowLabel = "Minimum", this.highLabel = "Maximum", this.lowValueText = "", this.highValueText = "", this.display = null, this.orientation = "horizontal", this._lowValue = 0, this._highValue = 100, this._lowInput = null, this._highInput = null, this._dragThumb = null, this._dragPointerId = null, this._addedHostRole = !1, this._onDefaultSlotChange = () => {
25
+ this._unwireInputs(), this._restoreInputs(), this._findInputs(), this.requestUpdate();
26
+ }, this._onLowInput = (t) => {
27
+ if (this.readonly) {
28
+ this._applyValueToInputs([this._lowValue, this._highValue]);
29
+ return;
30
+ }
31
+ const e = t.currentTarget;
32
+ this._setCurrentValue([e.valueAsNumber, this._highValue]), this._dispatch("rc-range-slider-input", this.value);
33
+ }, this._onLowChange = (t) => {
34
+ if (this.readonly) {
35
+ this._applyValueToInputs([this._lowValue, this._highValue]);
36
+ return;
37
+ }
38
+ const e = t.currentTarget;
39
+ this._setCurrentValue([e.valueAsNumber, this._highValue]), this._dispatch("rc-range-slider-change", this.value);
40
+ }, this._onHighInput = (t) => {
41
+ if (this.readonly) {
42
+ this._applyValueToInputs([this._lowValue, this._highValue]);
43
+ return;
44
+ }
45
+ const e = t.currentTarget;
46
+ this._setCurrentValue([this._lowValue, e.valueAsNumber]), this._dispatch("rc-range-slider-input", this.value);
47
+ }, this._onHighChange = (t) => {
48
+ if (this.readonly) {
49
+ this._applyValueToInputs([this._lowValue, this._highValue]);
50
+ return;
51
+ }
52
+ const e = t.currentTarget;
53
+ this._setCurrentValue([this._lowValue, e.valueAsNumber]), this._dispatch("rc-range-slider-change", this.value);
54
+ }, this._onLowKeydown = (t) => {
55
+ this._handleThumbKeydown(t, "low");
56
+ }, this._onHighKeydown = (t) => {
57
+ this._handleThumbKeydown(t, "high");
58
+ };
59
+ }
60
+ get value() {
61
+ return this._value ?? this._defaultValue ?? this._nativeInputValue;
62
+ }
63
+ set value(t) {
64
+ const e = this._value;
65
+ this._value = this._normalizeValue(t), this._valueInitialized = !0, this._applyValueToInputs(this._value), this._value !== e && this.requestUpdate("value", e);
66
+ }
67
+ get defaultValue() {
68
+ return this._defaultValue;
69
+ }
70
+ set defaultValue(t) {
71
+ const e = this._defaultValue;
72
+ this._defaultValue = t === void 0 ? void 0 : this._normalizeValue(t), !this._valueInitialized && this._value === void 0 && this._defaultValue !== void 0 && (this._applyValueToInputs(this._defaultValue), this.requestUpdate("value", void 0)), this.requestUpdate("defaultValue", e);
73
+ }
74
+ connectedCallback() {
75
+ super.connectedCallback(), this._syncHostRole(), this._findInputs();
76
+ }
77
+ disconnectedCallback() {
78
+ this._unwireInputs(), this._restoreInputs(), this._addedHostRole && (this.removeAttribute("role"), this._addedHostRole = !1), super.disconnectedCallback();
79
+ }
80
+ updated() {
81
+ this._syncInputReflectors();
82
+ }
83
+ render() {
84
+ const t = this._lowInput, e = this._highInput;
85
+ if (!t || !e) return u;
86
+ const r = this.lowValueText || String(this._lowValue), i = this.highValueText || String(this._highValue), a = m`
87
+ <span class="rc-range-slider-values" aria-hidden="true">
88
+ <span
89
+ part="value-display low-value-display"
90
+ class="rc-range-slider-value"
91
+ style=${this.display === "float" ? this._floatStyle(this._lowValue) : u}
92
+ ><slot name="low-value-display">${r}</slot></span
93
+ >
94
+ <span
95
+ part="value-display high-value-display"
96
+ class="rc-range-slider-value"
97
+ style=${this.display === "float" ? this._floatStyle(this._highValue) : u}
98
+ ><slot name="high-value-display">${i}</slot></span
99
+ >
100
+ </span>
101
+ `;
102
+ return m`
103
+ <div
104
+ part="root"
105
+ class="rc-range-slider-root"
106
+ data-display=${this.display ?? u}
107
+ data-orientation=${this.orientation}
108
+ >
109
+ ${this.display === "inline-start" ? a : u}
110
+
111
+ <div
112
+ part="group"
113
+ class="rc-range-slider-group"
114
+ @pointerdown=${this._onGroupPointerDown}
115
+ @pointermove=${this._onGroupPointerMove}
116
+ @pointerup=${this._onGroupPointerUp}
117
+ @pointercancel=${this._onGroupPointerCancel}
118
+ >
119
+ <span part="track" class="rc-range-slider-track" aria-hidden="true">
120
+ <slot name="track-background"></slot>
121
+ <span
122
+ part="range"
123
+ class="rc-range-slider-range"
124
+ style=${this._rangeStyle()}
125
+ ></span>
126
+ </span>
127
+
128
+ ${this._renderThumb("low")} ${this._renderThumb("high")}
129
+ <slot @slotchange=${this._onDefaultSlotChange}></slot>
130
+ ${this.display === "float" ? a : u}
131
+ </div>
132
+
133
+ ${this.display === "inline-end" ? a : u}
134
+ </div>
135
+ `;
136
+ }
137
+ _renderThumb(t) {
138
+ const e = t === "low", r = e ? this._lowInput : this._highInput, i = e ? this._lowValue : this._highValue, a = e ? this.lowValueText : this.highValueText, l = this._thumbLabel(t), d = r?.getAttribute("aria-labelledby");
139
+ return m`
140
+ <span
141
+ part=${e ? "thumb low-thumb" : "thumb high-thumb"}
142
+ class="rc-range-slider-thumb"
143
+ data-thumb=${t}
144
+ role="slider"
145
+ tabindex=${this.disabled ? "-1" : "0"}
146
+ aria-label=${l ?? u}
147
+ aria-labelledby=${d ?? u}
148
+ aria-valuemin=${String(e ? this._min() : this._lowValue)}
149
+ aria-valuemax=${String(e ? this._highValue : this._max())}
150
+ aria-valuenow=${String(i)}
151
+ aria-valuetext=${a || u}
152
+ aria-orientation=${this.orientation}
153
+ aria-disabled=${this.disabled ? "true" : u}
154
+ aria-readonly=${this.readonly ? "true" : u}
155
+ style=${this._thumbStyle(i)}
156
+ @keydown=${e ? this._onLowKeydown : this._onHighKeydown}
157
+ ></span>
158
+ `;
159
+ }
160
+ /**
161
+ * Finds the first two child `<input type="range">` elements and wires them.
162
+ * Inputs remain in the DOM permanently as form/progressive-enhancement
163
+ * reflectors.
164
+ */
165
+ _findInputs() {
166
+ const t = Array.from(
167
+ this.querySelectorAll('input[type="range"]')
168
+ ).slice(0, 2);
169
+ if (t.length < 2) {
170
+ console.warn(
171
+ '[rc-range-slider] Requires two child <input type="range"> elements.'
172
+ );
173
+ return;
174
+ }
175
+ const [e, r] = t;
176
+ !this.hasAttribute("disabled") && (e.disabled || r.disabled) && (this.disabled = !0), this._lowInput = e, this._highInput = r, this._applyInitialValueToInputs(e, r), this._wireInput(e, this._onLowInput, this._onLowChange), this._wireInput(r, this._onHighInput, this._onHighChange), this._syncInputReflectors();
177
+ }
178
+ get _nativeInputValue() {
179
+ const t = this._lowInput?.valueAsNumber, e = this._highInput?.valueAsNumber;
180
+ return [
181
+ t === void 0 || isNaN(t) ? this.min : t,
182
+ e === void 0 || isNaN(e) ? this.max : e
183
+ ];
184
+ }
185
+ _applyInitialValueToInputs(t, e) {
186
+ if (this._value !== void 0) {
187
+ this._applyValueToInputs(this._value);
188
+ return;
189
+ }
190
+ if (this._defaultValue !== void 0) {
191
+ this._applyValueToInputs(this._defaultValue);
192
+ return;
193
+ }
194
+ const r = t.valueAsNumber, i = e.valueAsNumber;
195
+ this._lowValue = isNaN(r) ? this._min() : r, this._highValue = isNaN(i) ? this._max() : i, this._defaultValue = this._normalizeValue([this._lowValue, this._highValue]), this._applyValueToInputs(this._defaultValue);
196
+ }
197
+ _applyValueToInputs(t) {
198
+ const [e, r] = this._normalizeValue(t);
199
+ this._lowValue = e, this._highValue = r, this._lowInput && (this._lowInput.value = String(e)), this._highInput && (this._highInput.value = String(r));
200
+ }
201
+ _setCurrentValue(t) {
202
+ const [e, r] = this._normalizeValue(t);
203
+ this._value = [e, r], this._valueInitialized = !0, this._applyValueToInputs(this._value), this.requestUpdate("value");
204
+ }
205
+ _wireInput(t, e, r) {
206
+ t.addEventListener("input", e), t.addEventListener("change", r);
207
+ }
208
+ _unwireInputs() {
209
+ this._lowInput?.removeEventListener("input", this._onLowInput), this._lowInput?.removeEventListener("change", this._onLowChange), this._highInput?.removeEventListener("input", this._onHighInput), this._highInput?.removeEventListener("change", this._onHighChange);
210
+ }
211
+ _restoreInputs() {
212
+ for (const t of [this._lowInput, this._highInput])
213
+ t?.removeAttribute("aria-hidden"), t?.removeAttribute("tabindex"), t?.removeAttribute("data-rc-range-slider-reflector"), t?.style.removeProperty("display");
214
+ }
215
+ _syncInputReflectors() {
216
+ const t = this._lowInput, e = this._highInput;
217
+ if (!(!t || !e))
218
+ for (const r of [t, e])
219
+ r.disabled = this.disabled, r.tabIndex = -1, r.setAttribute("aria-hidden", "true"), r.setAttribute("data-rc-range-slider-reflector", "");
220
+ }
221
+ _syncHostRole() {
222
+ this.hasAttribute("role") || (this.setAttribute("role", "group"), this._addedHostRole = !0);
223
+ }
224
+ _handleThumbKeydown(t, e) {
225
+ if (this.disabled || this.readonly) return;
226
+ const r = this._min(), i = this._max(), a = this._step(), l = a * 10, d = this._lowValue, g = this._highValue, p = e === "low" ? d : g, y = e === "low" ? r : d, w = e === "low" ? g : i;
227
+ let c = null;
228
+ switch (t.key) {
229
+ case "ArrowRight":
230
+ case "ArrowUp":
231
+ c = p + a;
232
+ break;
233
+ case "ArrowLeft":
234
+ case "ArrowDown":
235
+ c = p - a;
236
+ break;
237
+ case "PageUp":
238
+ c = p + l;
239
+ break;
240
+ case "PageDown":
241
+ c = p - l;
242
+ break;
243
+ case "Home":
244
+ c = y;
245
+ break;
246
+ case "End":
247
+ c = w;
248
+ break;
249
+ default:
250
+ return;
251
+ }
252
+ t.preventDefault();
253
+ const V = _(c, y, w, a);
254
+ V !== p && (this._setThumbValue(e, V), this._dispatch("rc-range-slider-input", this.value));
255
+ }
256
+ _onGroupPointerDown(t) {
257
+ if (this.disabled || this.readonly || t.button !== 0) return;
258
+ const e = this._nearestThumb(t), r = this._thumbElement(e);
259
+ this._dragThumb = e, this._dragPointerId = t.pointerId, t.preventDefault();
260
+ try {
261
+ t.currentTarget.setPointerCapture(t.pointerId);
262
+ } catch {
263
+ }
264
+ r?.focus(), this._setThumbValue(e, this._valueFromPointer(t, e)), this._dispatch("rc-range-slider-input", this.value);
265
+ }
266
+ _onGroupPointerMove(t) {
267
+ this._dragPointerId !== t.pointerId || this._dragThumb === null || (t.preventDefault(), this._setThumbValue(this._dragThumb, this._valueFromPointer(t, this._dragThumb)), this._dispatch("rc-range-slider-input", this.value));
268
+ }
269
+ _onGroupPointerUp(t) {
270
+ if (this._dragPointerId !== t.pointerId || this._dragThumb === null) return;
271
+ const e = this._dragThumb;
272
+ this._dragThumb = null, this._dragPointerId = null;
273
+ try {
274
+ t.currentTarget.releasePointerCapture(t.pointerId);
275
+ } catch {
276
+ }
277
+ this._dispatch("rc-range-slider-change", this.value), this._thumbElement(e)?.focus();
278
+ }
279
+ _onGroupPointerCancel(t) {
280
+ this._dragPointerId === t.pointerId && (this._dragThumb = null, this._dragPointerId = null);
281
+ }
282
+ _setThumbValue(t, e) {
283
+ if (t === "low") {
284
+ this._setCurrentValue([e, this._highValue]);
285
+ return;
286
+ }
287
+ this._setCurrentValue([this._lowValue, e]);
288
+ }
289
+ _valueFromPointer(t, e) {
290
+ const r = this._groupRect();
291
+ if (!r) return e === "low" ? this._lowValue : this._highValue;
292
+ const i = e === "low" ? this._min() : this._lowValue, a = e === "low" ? this._highValue : this._max(), l = this._max() - this._min();
293
+ if (l <= 0) return i;
294
+ const g = (this.orientation === "vertical" ? 1 - (t.clientY - r.top) / r.height : (t.clientX - r.left) / r.width) * l + this._min();
295
+ return _(g, i, a, this._step());
296
+ }
297
+ _nearestThumb(t) {
298
+ const e = this._valueFromPointer(t, "low"), r = Math.abs(e - this._lowValue), i = Math.abs(e - this._highValue);
299
+ return r === i ? e < this._lowValue ? "low" : "high" : r < i ? "low" : "high";
300
+ }
301
+ _rangeStyle() {
302
+ const t = b(this._lowValue, this._min(), this._max()), e = b(this._highValue, this._min(), this._max()), r = this._thumbCenterStyle(t), i = this._thumbCenterStyle(e);
303
+ return this.orientation === "vertical" ? [
304
+ `bottom:${r}`,
305
+ `height:max(0px, calc(${i} - ${r}))`
306
+ ].join(";") : [
307
+ `left:${r}`,
308
+ `width:max(0px, calc(${i} - ${r}))`
309
+ ].join(";");
310
+ }
311
+ _thumbStyle(t) {
312
+ const e = b(t, this._min(), this._max()), r = this._thumbCenterStyle(e);
313
+ return this.orientation === "vertical" ? `bottom:${r}` : `left:${r};top:50%`;
314
+ }
315
+ _thumbCenterStyle(t) {
316
+ const e = (1 - t * 2).toFixed(4);
317
+ return `calc(${(t * 100).toFixed(3)}% + ${e} * var(--rc-thumb-radius, 9px))`;
318
+ }
319
+ _floatStyle(t) {
320
+ const e = b(t, this._min(), this._max()), r = this._thumbCenterStyle(e);
321
+ return this.orientation === "vertical" ? `bottom:${r}` : `left:${r}`;
322
+ }
323
+ _normalizeValue([t, e]) {
324
+ const r = this._min(), i = this._max(), a = _(t, r, i, this._step()), l = _(e, r, i, this._step());
325
+ return [Math.min(a, l), Math.max(a, l)];
326
+ }
327
+ _min() {
328
+ return v(this._lowInput?.min ?? "", this.min);
329
+ }
330
+ _max() {
331
+ return v(this._highInput?.max ?? "", this.max);
332
+ }
333
+ _step() {
334
+ return v(this._lowInput?.step ?? "", this.step);
335
+ }
336
+ _groupRect() {
337
+ return this.shadowRoot?.querySelector(".rc-range-slider-group")?.getBoundingClientRect() ?? null;
338
+ }
339
+ _thumbElement(t) {
340
+ return this.shadowRoot?.querySelector(`[data-thumb="${t}"]`) ?? null;
341
+ }
342
+ _thumbLabel(t) {
343
+ const e = t === "low" ? this._lowInput : this._highInput, r = t === "low" ? this.lowLabel : this.highLabel, i = e?.getAttribute("aria-label");
344
+ if (i) return i;
345
+ const a = e?.labels?.[0]?.textContent?.trim();
346
+ return a || r || null;
347
+ }
348
+ _dispatch(t, e) {
349
+ this.dispatchEvent(
350
+ new CustomEvent(t, {
351
+ bubbles: !0,
352
+ composed: !0,
353
+ detail: { value: e }
354
+ })
355
+ );
356
+ }
357
+ };
358
+ f.styles = k`
359
+ :host {
360
+ --rc-range-slider-accent: var(--rc-accent, Highlight);
361
+ --rc-range-slider-track-background: color-mix(in srgb, CanvasText 25%, Canvas);
362
+ --rc-range-slider-range-background: var(--rc-range-slider-accent);
363
+ --rc-range-slider-thumb-background: ButtonFace;
364
+ --rc-range-slider-thumb-border: var(--rc-range-slider-accent);
365
+ --rc-range-slider-thumb-hover-background: var(--rc-range-slider-accent);
366
+ --rc-range-slider-thumb-hover-border: var(--rc-range-slider-accent);
367
+ --rc-range-slider-thumb-active-background: var(--rc-range-slider-accent);
368
+ --rc-range-slider-thumb-active-border: var(--rc-range-slider-accent);
369
+ --rc-range-slider-focus-outline: var(--rc-range-slider-accent);
370
+ display: block;
371
+ font-family: var(--rc-font-family, inherit);
372
+ font-size: var(--rc-font-size, inherit);
373
+ line-height: var(--rc-line-height, normal);
374
+ }
375
+
376
+ :host([disabled]) {
377
+ --rc-range-slider-accent: GrayText;
378
+ --rc-range-slider-track-background: color-mix(in srgb, GrayText 35%, Canvas);
379
+ --rc-range-slider-range-background: GrayText;
380
+ --rc-range-slider-thumb-border: GrayText;
381
+ --rc-range-slider-thumb-hover-background: ButtonFace;
382
+ --rc-range-slider-thumb-hover-border: GrayText;
383
+ --rc-range-slider-thumb-active-background: ButtonFace;
384
+ --rc-range-slider-thumb-active-border: GrayText;
385
+ --rc-range-slider-focus-outline: GrayText;
386
+ }
387
+
388
+ .rc-range-slider-root {
389
+ display: grid;
390
+ gap: var(--rc-range-slider-gap, var(--rc-control-gap, 0.5rem));
391
+ align-items: center;
392
+ }
393
+
394
+ .rc-range-slider-root[data-display="inline-start"] {
395
+ grid-template-columns: auto minmax(0, 1fr);
396
+ }
397
+
398
+ .rc-range-slider-root[data-display="inline-end"] {
399
+ grid-template-columns: minmax(0, 1fr) auto;
400
+ }
401
+
402
+ .rc-range-slider-group {
403
+ position: relative;
404
+ display: block;
405
+ min-width: 0;
406
+ min-height: var(--rc-range-slider-control-size, var(--rc-control-block-size, 1.5rem));
407
+ touch-action: none;
408
+ }
409
+
410
+ .rc-range-slider-track,
411
+ .rc-range-slider-range {
412
+ position: absolute;
413
+ pointer-events: none;
414
+ }
415
+
416
+ .rc-range-slider-track {
417
+ inset-inline: 0;
418
+ inset-block: calc(50% - var(--rc-range-slider-track-size, 0.1875rem) / 2);
419
+ block-size: var(--rc-range-slider-track-size, 0.1875rem);
420
+ background: var(--rc-range-slider-track-background);
421
+ border-radius: var(--rc-range-slider-track-radius, var(--rc-control-radius, 0));
422
+ overflow: hidden;
423
+ z-index: 0;
424
+ }
425
+
426
+ ::slotted([slot="track-background"]) {
427
+ position: absolute;
428
+ inset: 0;
429
+ pointer-events: none;
430
+ }
431
+
432
+ .rc-range-slider-range {
433
+ inset-block: 0;
434
+ background: var(--rc-range-slider-range-background);
435
+ border-radius: inherit;
436
+ z-index: 1;
437
+ }
438
+
439
+ .rc-range-slider-thumb {
440
+ position: absolute;
441
+ z-index: 2;
442
+ inline-size: var(--rc-range-slider-thumb-size, 1.125rem);
443
+ block-size: var(--rc-range-slider-thumb-size, 1.125rem);
444
+ background: var(--rc-range-slider-thumb-background);
445
+ border: 2px solid var(--rc-range-slider-thumb-border);
446
+ border-radius: 50%;
447
+ box-sizing: border-box;
448
+ cursor: grab;
449
+ transform: translate(-50%, -50%);
450
+ transition:
451
+ background-color 120ms ease,
452
+ border-color 120ms ease,
453
+ box-shadow 120ms ease,
454
+ transform var(--rc-motion-duration, 120ms) ease;
455
+ }
456
+
457
+ .rc-range-slider-thumb:focus-visible {
458
+ outline: var(--rc-focus-ring, 2px solid var(--rc-range-slider-focus-outline));
459
+ outline-offset: var(--rc-focus-ring-offset, 2px);
460
+ }
461
+
462
+ :host(:not([disabled]):not([readonly])) .rc-range-slider-thumb:hover {
463
+ background: var(--rc-range-slider-thumb-hover-background);
464
+ border-color: var(--rc-range-slider-thumb-hover-border);
465
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--rc-range-slider-accent) 20%, transparent);
466
+ }
467
+
468
+ :host(:not([disabled]):not([readonly])) .rc-range-slider-thumb:active {
469
+ background: var(--rc-range-slider-thumb-active-background);
470
+ border-color: var(--rc-range-slider-thumb-active-border);
471
+ box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--rc-range-slider-accent) 28%, transparent);
472
+ cursor: grabbing;
473
+ }
474
+
475
+ :host(:not([disabled]):not([readonly])) .rc-range-slider-group:hover .rc-range-slider-track {
476
+ background: color-mix(in srgb, var(--rc-range-slider-track-background) 70%, CanvasText);
477
+ }
478
+
479
+ .rc-range-slider-thumb[aria-disabled="true"],
480
+ .rc-range-slider-thumb[aria-readonly="true"] {
481
+ cursor: default;
482
+ }
483
+
484
+ :host([disabled]) .rc-range-slider-root {
485
+ opacity: 0.65;
486
+ }
487
+
488
+ ::slotted(input[type="range"]) {
489
+ position: absolute;
490
+ inline-size: 1px;
491
+ block-size: 1px;
492
+ margin: 0;
493
+ padding: 0;
494
+ border: 0;
495
+ clip-path: inset(50%);
496
+ opacity: 0;
497
+ overflow: hidden;
498
+ pointer-events: none;
499
+ }
500
+
501
+ .rc-range-slider-values {
502
+ pointer-events: none;
503
+ font-variant-numeric: tabular-nums;
504
+ white-space: nowrap;
505
+ color: var(--rc-range-slider-value-color, var(--rc-text-disabled, GrayText));
506
+ }
507
+
508
+ .rc-range-slider-root[data-display="float"] .rc-range-slider-values {
509
+ position: absolute;
510
+ inset: 0;
511
+ z-index: 5;
512
+ }
513
+
514
+ .rc-range-slider-root[data-display="float"] .rc-range-slider-value {
515
+ position: absolute;
516
+ inset-block-start: var(--rc-range-slider-float-value-block-offset, -1.4em);
517
+ transform: translateX(-50%);
518
+ }
519
+
520
+ .rc-range-slider-root[data-display="inline-start"] .rc-range-slider-values,
521
+ .rc-range-slider-root[data-display="inline-end"] .rc-range-slider-values {
522
+ display: flex;
523
+ gap: 0.25em;
524
+ align-items: center;
525
+ }
526
+
527
+ .rc-range-slider-root[data-display="inline-start"] .rc-range-slider-value:first-child::after,
528
+ .rc-range-slider-root[data-display="inline-end"] .rc-range-slider-value:first-child::after {
529
+ content: " -";
530
+ }
531
+
532
+ :host([orientation="vertical"]) {
533
+ display: inline-block;
534
+ }
535
+
536
+ :host([orientation="vertical"]) .rc-range-slider-group {
537
+ inline-size: var(--rc-range-slider-control-size, var(--rc-control-block-size, 1.5rem));
538
+ block-size: var(--rc-range-slider-vertical-size, 12.5rem);
539
+ }
540
+
541
+ :host([orientation="vertical"]) .rc-range-slider-track {
542
+ inset-block: 0;
543
+ inset-inline: calc(50% - var(--rc-range-slider-track-size, 0.1875rem) / 2);
544
+ inline-size: var(--rc-range-slider-track-size, 0.1875rem);
545
+ block-size: auto;
546
+ }
547
+
548
+ :host([orientation="vertical"]) .rc-range-slider-range {
549
+ inset-inline: 0;
550
+ inset-block-start: auto;
551
+ }
552
+
553
+ :host([orientation="vertical"]) .rc-range-slider-thumb {
554
+ inset-inline-start: 50%;
555
+ transform: translate(-50%, 50%);
556
+ }
557
+
558
+ :host([orientation="vertical"]) .rc-range-slider-root[data-display="float"] .rc-range-slider-value {
559
+ inset-block-start: auto;
560
+ inset-inline-start: var(--rc-range-slider-float-value-inline-offset, calc(100% + 0.5rem));
561
+ transform: translateY(50%);
562
+ }
563
+ `;
564
+ let s = f;
565
+ n([
566
+ h({ type: Number })
567
+ ], s.prototype, "min", 2);
568
+ n([
569
+ h({ type: Number })
570
+ ], s.prototype, "max", 2);
571
+ n([
572
+ h({ type: Number })
573
+ ], s.prototype, "step", 2);
574
+ n([
575
+ h({ attribute: !1 })
576
+ ], s.prototype, "value", 1);
577
+ n([
578
+ h({ attribute: !1 })
579
+ ], s.prototype, "defaultValue", 1);
580
+ n([
581
+ h({ type: Boolean, reflect: !0 })
582
+ ], s.prototype, "disabled", 2);
583
+ n([
584
+ h({ type: Boolean, reflect: !0 })
585
+ ], s.prototype, "readonly", 2);
586
+ n([
587
+ h({ attribute: "low-label" })
588
+ ], s.prototype, "lowLabel", 2);
589
+ n([
590
+ h({ attribute: "high-label" })
591
+ ], s.prototype, "highLabel", 2);
592
+ n([
593
+ h({ attribute: "low-value-text" })
594
+ ], s.prototype, "lowValueText", 2);
595
+ n([
596
+ h({ attribute: "high-value-text" })
597
+ ], s.prototype, "highValueText", 2);
598
+ n([
599
+ h({ reflect: !0, converter: z })
600
+ ], s.prototype, "display", 2);
601
+ n([
602
+ h({ reflect: !0 })
603
+ ], s.prototype, "orientation", 2);
604
+ n([
605
+ x()
606
+ ], s.prototype, "_lowValue", 2);
607
+ n([
608
+ x()
609
+ ], s.prototype, "_highValue", 2);
610
+ export {
611
+ s as R
612
+ };
613
+ //# sourceMappingURL=rc-range-slider-CL02oFwb.js.map