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