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