ropav 0.0.10 → 0.0.12

package/dist/slider.js

@@ -1,10 +1,12 @@
 import './slider.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { i as useDelayedOpen, n as resolveTooltipColorStyleWithContrast, r as resolveTooltipOffsetStyle, t as tooltip_default } from "./tooltip.js";
-import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setStyle, setText, setValue, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
+import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/slider/sliderCore.ts
 function normalizeSliderBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
@@ -104,18 +106,18 @@ function getSliderTrackStyle(props, valuePercent) {
 	};
 	setSliderStyleValue(style, "--_rp-slider-color", getSliderColorValue(props.color));
 	applySliderThumbStyle(style, props.thumbStyle, {
-		size: "--_rp-slider-thumb-size",
+		size: "--rp-slider-thumb-size",
 		border: "--_rp-slider-thumb-border-style",
-		padding: "--_rp-slider-thumb-padding",
+		padding: "--rp-slider-thumb-padding",
 		borderColor: "--_rp-slider-thumb-border"
 	});
 	return style;
 }
-function useSlider(props, emitUpdate) {
+function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props.min) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
 	const nativeStep = computed(() => normalizeSliderStep(props.step));
-	const normalizedValue = computed(() => normalizeSliderValue(props.modelValue, bounds.value.min, bounds.value.max, nativeStep.value));
+	const normalizedValue = computed(() => normalizeSliderValue(getValue(), bounds.value.min, bounds.value.max, nativeStep.value));
 	const valuePercent = computed(() => getSliderValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
 	const formattedValue = computed(() => getFormattedSliderValue(normalizedValue.value, props.formatValue));
 	const ariaValueText = computed(() => getSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
@@ -157,7 +159,8 @@ function useSlider(props, emitUpdate) {
 		marked: markItems.value.length > 0,
 		"marks-with-labels": hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled
+		disabled: control.disabled,
+		invalid: control.invalid
 	}));
 	const trackStyle = computed(() => getSliderTrackStyle(props, valuePercent.value));
 	function onInput(e) {
@@ -255,25 +258,27 @@ function useSlider(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<span data-v-b852f835 class=rp-slider__label>");
-var t1$2 = template("<span data-v-b852f835 class=rp-slider__value aria-hidden=true>");
-var t2$2 = template("<span data-v-b852f835 class=rp-slider__header>");
-var t3$2 = template("<span data-v-b852f835 class=rp-slider__mark-label> ");
-var t4$2 = template("<span data-v-b852f835><span data-v-b852f835 class=rp-slider__mark-dot></span>");
-var t5$1 = template("<span data-v-b852f835 class=rp-slider__marks aria-hidden=true>");
-var t6$1 = template("<span data-v-b852f835 class=rp-slider__thumb aria-hidden=true><span data-v-b852f835 class=rp-slider__thumb-content>");
-var t7$1 = template("<span data-v-b852f835 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
-var t8$1 = template("<label data-v-b852f835><span data-v-b852f835 class=rp-slider__track><span data-v-b852f835 class=rp-slider__bar aria-hidden=true></span><input data-v-b852f835 class=rp-slider__native type=range>", 1);
-delegateEvents("input", "pointerdown", "focusin", "focusout", "keydown");
+var t0$2 = template("<span data-v-a837ba72>");
+var t1$2 = template("<span data-v-a837ba72 class=rp-slider__header>");
+var t2$2 = template("<span data-v-a837ba72> ");
+var t3$2 = template("<span data-v-a837ba72><span data-v-a837ba72 class=rp-slider__mark-dot></span>");
+var t4$2 = template("<span data-v-a837ba72 class=rp-slider__marks aria-hidden=true>");
+var t5$1 = template("<span data-v-a837ba72><span data-v-a837ba72 class=rp-slider__thumb-content>");
+var t6$1 = template("<span data-v-a837ba72 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
+var t7$1 = template("<label data-v-a837ba72><span data-v-a837ba72><span data-v-a837ba72></span><input data-v-a837ba72>", 1);
+delegateEvents("pointerdown", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpSlider",
+	inheritAttrs: false,
 	__name: "slider",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
 		min: { default: 0 },
 		max: { default: 100 },
 		step: { default: 1 },
@@ -295,39 +300,105 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: Boolean,
 			default: void 0
 		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		ariaLabel: {},
 		ariaValueText: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, onTooltipPointerDown, onTooltipMouseEnter, onTooltipMouseLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => {
-			emit("update:modelValue", value);
+		const inputRef = ref(null);
+		const slots = useSlots();
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? props.min,
+			onChange: (value) => emit("update:modelValue", value)
 		});
-		const n31 = t8$1();
-		const n30 = child(n31, 1);
-		const n11 = next(child(n30), 1);
-		renderEffect(() => {
-			setClass(n31, [unref(rootClass), { "rp-slider--custom-thumb": $slots.thumb }]);
-			setAttr(n31, "data-disabled", unref(control).disabled || void 0);
-			setStyle(n31, unref(trackStyle));
+		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, onTooltipPointerDown, onTooltipMouseEnter, onTooltipMouseLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useFormControl({
+			elements: () => [inputRef.value],
+			isControlled: () => controllable.isControlled.value,
+			initializeDefault(element) {
+				element.defaultValue = String(normalizeSliderValue(controllable.initialValue, nativeMin.value, nativeMax.value, nativeStep.value));
+			},
+			validationMessage: () => props.validationMessage,
+			readResetValue(elements) {
+				controllable.resetValue(elements[0].valueAsNumber);
+			},
+			syncControlledValue(elements) {
+				elements[0].value = String(normalizedValue.value);
+			}
 		});
-		setInsertionState(n31, 0, 0);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, { "rp-slider--custom-thumb": Boolean(slots.thumb) }],
+			style: trackStyle.value,
+			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
+			"data-orientation": props.orientation
+		}));
+		const tooltipClassNames = computed(() => ({
+			root: ["rp-slider__tooltip", props.classNames?.tooltip],
+			content: "rp-slider__tooltip-content"
+		}));
+		const tooltipStyles = computed(() => ({ root: props.styles?.tooltip }));
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				...getPartAttrs("input", {
+					class: "rp-slider__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(event);
+					compatibilityOnInput?.(event);
+				}
+			};
+		});
+		function focus(options) {
+			inputRef.value?.focus(options);
+		}
+		__expose({
+			nativeElement: inputRef,
+			focus
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n32 = t7$1();
+		const n31 = child(n32, 1);
+		const n11 = child(n31);
+		const n12 = next(n11, 1);
+		renderEffect(() => setDynamicProps(n32, [rootAttrs.value]));
+		setInsertionState(n32, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2$2();
+			const n10 = t1$2();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0$2();
+				renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("label", { class: "rp-slider__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1$2();
+				const n9 = t0$2();
+				renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("value", { class: "rp-slider__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -338,61 +409,84 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			});
 			return n10;
 		});
-		n11.$evtinput = createInvoker((e) => unref(onInput)(e));
+		_setTemplateRef(n12, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _getPartAttrs = unref(getPartAttrs);
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
-			setProp(n11, "id", _control.id);
-			setProp(n11, "name", __props.name);
-			setValue(n11, unref(normalizedValue));
-			setProp(n11, "min", unref(nativeMin));
-			setProp(n11, "max", unref(nativeMax));
-			setProp(n11, "step", unref(nativeStep));
-			setProp(n11, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
-			setProp(n11, "disabled", _control.disabled || void 0);
-			setAttr(n11, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n11, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n11, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n11, "aria-orientation", __props.orientation === "vertical" ? "vertical" : void 0);
-			setAttr(n11, "aria-valuetext", unref(ariaValueText));
+			const _props = props;
+			const _props_required_nativeInputAttrs_required = _props.required ?? _nativeInputAttrs.required;
+			setDynamicProps(n31, [_getPartAttrs("track", { class: "rp-slider__track" })]);
+			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-slider__bar" }), { "aria-hidden": "true" }]);
+			setDynamicProps(n12, [_nativeInputAttrs, {
+				id: _control.id,
+				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
+				type: "range",
+				value: unref(normalizedValue),
+				min: unref(nativeMin),
+				max: unref(nativeMax),
+				step: unref(nativeStep),
+				orient: __props.orientation === "vertical" ? "vertical" : void 0,
+				disabled: _control.disabled || void 0,
+				required: _props_required_nativeInputAttrs_required,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
+				"aria-valuetext": unref(ariaValueText),
+				"aria-invalid": _props.invalid === void 0 ? _nativeInputAttrs["aria-invalid"] : _control.invalid || void 0,
+				"aria-required": _props_required_nativeInputAttrs_required,
+				"data-disabled": unref(presence)(_control.disabled),
+				"data-invalid": unref(presence)(_control.invalid)
+			}]);
 		});
-		setInsertionState(n30, null, 2);
+		setInsertionState(n31, null, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n20 = t5$1();
-			setInsertionState(n20, null, 0);
+			const n21 = t4$2();
+			setInsertionState(n21, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n19 = t4$2();
+				const n20 = t3$2();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setClassName(n19, _mark.filled ? 1 : 0, " rp-slider__mark--filled", "rp-slider__mark");
-					setStyle(n19, _mark.style);
+					setDynamicProps(n20, [unref(getPartAttrs)("mark", {
+						class: ["rp-slider__mark", { "rp-slider__mark--filled": _mark.filled }],
+						style: _mark.style
+					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n19, null, 1);
+				setInsertionState(n20, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n18 = t3$2();
-					const x18 = txt(n18);
-					renderEffect(() => setText(x18, toDisplayString(_for_item0.value.label)));
-					return n18;
+					const n19 = t2$2();
+					const x19 = txt(n19);
+					renderEffect(() => {
+						setDynamicProps(n19, [unref(getPartAttrs)("markLabel", { class: "rp-slider__mark-label" })]);
+						setText(x19, toDisplayString(_for_item0.value.label));
+					});
+					return n19;
 				});
-				return n19;
+				return n20;
 			}, (mark) => mark.key, 9);
-			return n20;
+			return n21;
 		});
-		setInsertionState(n30, null, 3);
+		setInsertionState(n31, null, 3);
 		createIf(() => $slots.thumb, () => {
-			const n25 = t6$1();
-			setInsertionState(child(n25), null, 0);
+			const n26 = t5$1();
+			const n25 = child(n26);
+			renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("thumb", { class: "rp-slider__thumb" }), { "aria-hidden": "true" }]));
+			setInsertionState(n25, null, 0);
 			createSlot("thumb", {
 				value: () => unref(normalizedValue),
 				formattedValue: () => unref(formattedValue),
 				percent: () => unref(valuePercent)
 			}, null, 1);
-			return n25;
+			return n26;
 		});
-		setInsertionState(n30, null, 4);
+		setInsertionState(n31, null, 4);
 		createIf(() => unref(tooltipVisible), () => {
 			return createComponent(tooltip_default, {
 				id: () => unref(tooltipId),
-				class: "rp-slider__tooltip",
+				"class-names": () => tooltipClassNames.value,
+				styles: () => tooltipStyles.value,
 				content: () => unref(tooltipContent),
 				placement: () => unref(tooltipPlacement),
 				color: () => unref(tooltipColor),
@@ -402,18 +496,18 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				arrow: () => unref(tooltipArrow),
 				decorative: ""
 			}, () => {
-				return t7$1();
+				return t6$1();
 			});
 		});
-		n30.$evtpointerdown = createInvoker((e) => unref(onTooltipPointerDown)(e));
-		on(n30, "mouseenter", (e) => unref(onTooltipMouseEnter)(e));
-		on(n30, "mouseleave", (e) => unref(onTooltipMouseLeave)(e));
-		n30.$evtfocusin = createInvoker((e) => unref(onTooltipFocusIn)(e));
-		n30.$evtfocusout = createInvoker((e) => unref(onTooltipFocusOut)(e));
-		n30.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
-		return n31;
+		n31.$evtpointerdown = createInvoker((e) => unref(onTooltipPointerDown)(e));
+		on(n31, "mouseenter", (e) => unref(onTooltipMouseEnter)(e));
+		on(n31, "mouseleave", (e) => unref(onTooltipMouseLeave)(e));
+		n31.$evtfocusin = createInvoker((e) => unref(onTooltipFocusIn)(e));
+		n31.$evtfocusout = createInvoker((e) => unref(onTooltipFocusOut)(e));
+		n31.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
+		return n32;
 	}
-}), [["__scopeId", "data-v-b852f835"]]);
+}), [["__scopeId", "data-v-a837ba72"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -605,11 +699,11 @@ function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement
 }
 //#endregion
 //#region src/components/slider/range-slider-tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-d17966e5 class=rp-range-slider__tooltip-merged-value> </span>");
-var t1$1 = template("<span data-v-d17966e5 class=rp-range-slider__tooltip-merged-value> ");
-var t2$1 = template("<span data-v-d17966e5 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
+var t0$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> </span>");
+var t1$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> ");
+var t2$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
 var t3$1 = template(" ");
-var t4$1 = template("<span data-v-d17966e5 aria-hidden=true><span data-v-d17966e5><span data-v-d17966e5 class=rp-range-slider__tooltip-anchor></span><span data-v-d17966e5 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-d17966e5><span data-v-d17966e5 class=rp-range-slider__tooltip-anchor></span><span data-v-d17966e5 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-d17966e5><span data-v-d17966e5 class=rp-range-slider__tooltip-anchor></span><span data-v-d17966e5 class=rp-tooltip__content aria-hidden=true>", 1);
+var t4$1 = template("<span data-v-ce70c540 aria-hidden=true><span data-v-ce70c540 data-thumb=lower><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=upper><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=merged><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true>", 1);
 //#endregion
 //#region src/components/slider/range-slider-tooltip.vue
 var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -629,7 +723,21 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		open: { type: Boolean },
 		orientation: {},
 		placement: {},
-		valuePercent: {}
+		valuePercent: {},
+		tooltipClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tooltipStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: ["update:overlapping"],
 	setup(__props, { emit: __emit }) {
@@ -685,7 +793,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		applyVShow(n2, () => __props.open);
 		_setTemplateRef(n2, upperContentRef, null, "upperContentRef");
 		renderEffect(() => {
-			const _tooltipRootClass = tooltipRootClass.value;
+			const _tooltipStyle = __props.tooltipStyle;
 			const _resolvedIds = resolvedIds.value;
 			const _contentStyle = contentStyle.value;
 			const _content = __props.content;
@@ -699,26 +807,32 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			]);
 			setStyle(n16, layerStyle.value);
 			setClass(n1, [
-				_tooltipRootClass,
+				tooltipRootClass.value,
 				"rp-range-slider__tooltip",
-				"rp-range-slider__tooltip--lower"
+				"rp-range-slider__tooltip--lower",
+				__props.tooltipClass
 			]);
+			setStyle(n1, _tooltipStyle);
 			setProp(n0, "id", _resolvedIds[0]);
 			setStyle(n0, _contentStyle);
 			setText(x0, toDisplayString(_content[0]));
 			setClass(n3, [
-				_tooltipRootClass,
+				tooltipRootClass.value,
 				"rp-range-slider__tooltip",
-				"rp-range-slider__tooltip--upper"
+				"rp-range-slider__tooltip--upper",
+				__props.tooltipClass
 			]);
+			setStyle(n3, _tooltipStyle);
 			setProp(n2, "id", _resolvedIds[1]);
 			setStyle(n2, _contentStyle);
 			setText(x2, toDisplayString(_content[1]));
 			setClass(n15, [
-				_tooltipRootClass,
+				tooltipRootClass.value,
 				"rp-range-slider__tooltip",
-				"rp-range-slider__tooltip--merged"
+				"rp-range-slider__tooltip--merged",
+				__props.tooltipClass
 			]);
+			setStyle(n15, _tooltipStyle);
 			setProp(n14, "id", resolvedMergedId.value);
 			setStyle(n14, _contentStyle);
 		});
@@ -759,7 +873,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		_setTemplateRef(n16, tooltipLayerRef, null, "tooltipLayerRef");
 		return n16;
 	}
-}), [["__scopeId", "data-v-d17966e5"]]);
+}), [["__scopeId", "data-v-ce70c540"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderPointer.ts
 function useRangeSliderPointer(options) {
@@ -1049,9 +1163,9 @@ function getRangeSliderTrackStyle(props, valuePercent) {
 	};
 	setSliderStyleValue(style, "--_rp-range-slider-color", getComponentColorValue(props.color));
 	applySliderThumbStyle(style, props.thumbStyle, {
-		size: "--_rp-range-slider-thumb-size",
+		size: "--rp-slider-thumb-size",
 		border: "--_rp-range-slider-thumb-border-style",
-		padding: "--_rp-range-slider-thumb-padding",
+		padding: "--rp-slider-thumb-padding",
 		borderColor: "--_rp-range-slider-thumb-border"
 	});
 	return style;
@@ -1079,7 +1193,7 @@ function getThumbInput(track, thumb) {
 function focusThumb(track, thumb) {
 	getThumbInput(track, thumb)?.focus({ preventScroll: true });
 }
-function useRangeSlider(props, emitUpdate) {
+function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ?? [props.min, props.max]) {
 	const control = useControlState(props);
 	const activeThumb = ref();
 	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
@@ -1091,7 +1205,7 @@ function useRangeSlider(props, emitUpdate) {
 	});
 	const hasManualNativeKeyboard = computed(() => valueStep.value !== "any" && nativeStep.value === "any");
 	const normalizedMinRange = computed(() => normalizeRangeSliderMinRange(props.minRange, bounds.value.min, bounds.value.max));
-	const normalizedValue = computed(() => normalizeRangeSliderValue(props.modelValue, bounds.value.min, bounds.value.max, valueStep.value, normalizedMinRange.value));
+	const normalizedValue = computed(() => normalizeRangeSliderValue(getValue(), bounds.value.min, bounds.value.max, valueStep.value, normalizedMinRange.value));
 	const valuePercent = computed(() => [getSliderValuePercent(normalizedValue.value[0], bounds.value.min, bounds.value.max), getSliderValuePercent(normalizedValue.value[1], bounds.value.min, bounds.value.max)]);
 	const formattedValue = computed(() => getFormattedRangeSliderValue(normalizedValue.value, props.formatValue));
 	const ariaLabels = computed(() => props.ariaLabel ?? ["Minimum", "Maximum"]);
@@ -1154,7 +1268,8 @@ function useRangeSlider(props, emitUpdate) {
 		marked: markItems.value.length > 0,
 		"marks-with-labels": hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled
+		disabled: control.disabled,
+		invalid: control.invalid
 	}));
 	function getThumbUpdate(thumb, value, anchorValue = normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))]) {
 		const safeValue = normalizeSliderValue(value, bounds.value.min, bounds.value.max, valueStep.value);
@@ -1307,28 +1422,32 @@ function useRangeSlider(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/slider/range-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-8dd81f55 class=rp-range-slider__label>");
-var t1 = template("<span data-v-8dd81f55 class=rp-range-slider__value aria-hidden=true>");
-var t2 = template("<span data-v-8dd81f55 class=rp-range-slider__header>");
-var t3 = template("<input data-v-8dd81f55 type=range>");
-var t4 = template("<span data-v-8dd81f55 class=rp-range-slider__mark-label> ");
-var t5 = template("<span data-v-8dd81f55><span data-v-8dd81f55 class=rp-range-slider__mark-dot></span>");
-var t6 = template("<span data-v-8dd81f55 class=rp-range-slider__marks aria-hidden=true>");
-var t7 = template("<span data-v-8dd81f55><span data-v-8dd81f55 class=rp-range-slider__thumb-content>");
-var t8 = template("<div data-v-8dd81f55 role=group><span data-v-8dd81f55 class=rp-range-slider__track><span data-v-8dd81f55 class=rp-range-slider__bar aria-hidden=true></span><!><span data-v-8dd81f55 class=rp-range-slider__thumbs aria-hidden=true>", 1);
-delegateEvents("input", "keydown", "pointerdown");
+var t0 = template("<span data-v-b0e2c3da>");
+var t1 = template("<span data-v-b0e2c3da class=rp-range-slider__header>");
+var t2 = template("<input data-v-b0e2c3da>");
+var t3 = template("<span data-v-b0e2c3da> ");
+var t4 = template("<span data-v-b0e2c3da><span data-v-b0e2c3da class=rp-range-slider__mark-dot></span>");
+var t5 = template("<span data-v-b0e2c3da class=rp-range-slider__marks aria-hidden=true>");
+var t6 = template("<span data-v-b0e2c3da><span data-v-b0e2c3da class=rp-range-slider__thumb-content>");
+var t7 = template("<div data-v-b0e2c3da><span data-v-b0e2c3da><span data-v-b0e2c3da></span><!><span data-v-b0e2c3da class=rp-range-slider__thumbs aria-hidden=true>", 1);
+delegateEvents("pointerdown");
 //#endregion
 //#region src/components/slider/range-slider.vue
 var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpRangeSlider",
+	inheritAttrs: false,
 	__name: "range-slider",
 	props: {
-		modelValue: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
 		minRange: { default: 0 },
 		name: {},
 		ariaLabel: { default: () => ["Minimum", "Maximum"] },
 		ariaValueText: {},
+		inputAttrs: {},
+		validationMessage: {},
 		id: {},
+		form: {},
 		min: { default: 0 },
 		max: { default: 100 },
 		step: { default: 1 },
@@ -1350,55 +1469,154 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: void 0
 		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
 		const generatedId = useId();
 		const tooltipsOverlapping = ref(false);
 		const rangeSliderThumbs = ["lower", "upper"];
+		const lowerInputRef = ref(null);
+		const upperInputRef = ref(null);
 		const labelId = computed(() => `${props.id ?? generatedId}-label`);
-		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? [props.min, props.max],
+			onChange: (value) => emit("update:modelValue", value)
 		});
+		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		const validationMessages = computed(() => Array.isArray(props.validationMessage) ? props.validationMessage : [props.validationMessage, props.validationMessage]);
+		function normalizeInitialValue(value = controllable.initialValue) {
+			return normalizeRangeSliderValue(value, props.min, props.max, props.step, props.minRange);
+		}
+		useFormControl({
+			elements: () => [lowerInputRef.value, upperInputRef.value],
+			isControlled: () => controllable.isControlled.value,
+			initializeDefault(element, index) {
+				const initialValue = normalizeInitialValue();
+				element.defaultValue = String(initialValue[index]);
+			},
+			validationMessage: (_element, index) => validationMessages.value[index],
+			readResetValue(elements) {
+				const resetValue = [normalizedValue.value[0], normalizedValue.value[1]];
+				for (const element of elements) {
+					const index = element === upperInputRef.value ? 1 : 0;
+					resetValue[index] = Number(element.defaultValue);
+				}
+				const nextValue = normalizeInitialValue(resetValue);
+				controllable.resetValue(nextValue);
+				nextTick(() => {
+					if (lowerInputRef.value) lowerInputRef.value.value = String(nextValue[0]);
+					if (upperInputRef.value) upperInputRef.value.value = String(nextValue[1]);
+				});
+			},
+			syncControlledValue(elements) {
+				for (const element of elements) {
+					const index = element === upperInputRef.value ? 1 : 0;
+					element.value = String(normalizedValue.value[index]);
+				}
+			}
+		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, {
+				"rp-range-slider--custom-thumb": Boolean(slots.thumb),
+				"rp-range-slider--tooltips-overlapping": tooltipsOverlapping.value
+			}],
+			style: trackStyle.value,
+			role: "group",
+			"data-active-thumb": activeThumb.value || void 0,
+			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
+			"data-orientation": props.orientation,
+			"aria-labelledby": groupLabelledby.value,
+			"aria-describedby": control.ariaDescribedby,
+			"aria-invalid": control.invalid || void 0,
+			"aria-required": control.required || void 0
+		}));
+		const inputAttrsByThumb = computed(() => {
+			if (Array.isArray(props.inputAttrs)) return props.inputAttrs;
+			return [props.inputAttrs, props.inputAttrs];
+		});
+		const nativeInputAttrs = computed(() => rangeSliderThumbs.map((thumb, index) => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onFocus: compatibilityOnFocus, onBlur: compatibilityOnBlur, onKeydown: compatibilityOnKeydown, ...attrs } = inputAttrsByThumb.value[index] ?? {};
+			return Object.assign({}, attrs, {
+				...getPartAttrs("input", {
+					class: ["rp-range-slider__native", `rp-range-slider__native--${thumb}`],
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(thumb, event);
+					compatibilityOnInput?.(event);
+				},
+				onFocus(event) {
+					onTooltipFocus(thumb);
+					compatibilityOnFocus?.(event);
+				},
+				onBlur(event) {
+					onTooltipBlur(thumb);
+					compatibilityOnBlur?.(event);
+				},
+				onKeydown(event) {
+					onTooltipKeydown(thumb, event);
+					compatibilityOnKeydown?.(event);
+				}
+			});
+		}));
+		const nativeElements = computed(() => [lowerInputRef.value, upperInputRef.value]);
+		function setInputRef(index, element) {
+			const input = element instanceof HTMLInputElement ? element : null;
+			if (index === 0) lowerInputRef.value = input;
+			else upperInputRef.value = input;
+		}
+		function focus(options) {
+			lowerInputRef.value?.focus(options);
+		}
 		const groupLabelledby = computed(() => {
 			const values = [control.ariaLabelledby, slots.default ? labelId.value : void 0].flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
 			return values.length ? Array.from(new Set(values)).join(" ") : void 0;
 		});
-		const n34 = t8();
-		const n33 = child(n34, 1);
-		const n32 = next(child(n33), 1);
-		const n31 = next(n32, 3);
-		renderEffect(() => {
-			const _control = unref(control);
-			setClass(n34, [unref(rootClass), {
-				"rp-range-slider--custom-thumb": $slots.thumb,
-				"rp-range-slider--tooltips-overlapping": tooltipsOverlapping.value
-			}]);
-			setAttr(n34, "data-active-thumb", unref(activeThumb));
-			setAttr(n34, "data-disabled", _control.disabled || void 0);
-			setStyle(n34, unref(trackStyle));
-			setAttr(n34, "aria-labelledby", groupLabelledby.value);
-			setAttr(n34, "aria-describedby", _control.ariaDescribedby);
+		__expose({
+			nativeElements,
+			focus
 		});
-		setInsertionState(n34, 0, 0);
+		const _setTemplateRef = createTemplateRefSetter();
+		const n35 = t7();
+		const n34 = child(n35, 1);
+		const n11 = child(n34);
+		const n33 = next(n11, 1);
+		const n32 = next(n33, 3);
+		renderEffect(() => setDynamicProps(n35, [rootAttrs.value]));
+		setInsertionState(n35, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2();
+			const n10 = t1();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0();
-				renderEffect(() => setProp(n5, "id", labelId.value));
+				renderEffect(() => setDynamicProps(n5, [{ id: labelId.value }, unref(getPartAttrs)("label", { class: "rp-range-slider__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1();
+				const n9 = t0();
+				renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("value", { class: "rp-range-slider__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -1409,61 +1627,86 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 			return n10;
 		});
-		setInsertionState(n33, n32, 1);
+		renderEffect(() => {
+			const _getPartAttrs = unref(getPartAttrs);
+			setDynamicProps(n34, [_getPartAttrs("track", { class: "rp-range-slider__track" })]);
+			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-range-slider__bar" }), { "aria-hidden": "true" }]);
+		});
+		setInsertionState(n34, n33, 1);
 		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
-			const n13 = t3();
-			n13.$evtinput = createInvoker(($event) => unref(onInput)(_for_item0.value, $event));
-			on(n13, "focus", () => unref(onTooltipFocus)(_for_item0.value));
-			on(n13, "blur", () => unref(onTooltipBlur)(_for_item0.value));
-			n13.$evtkeydown = createInvoker(($event) => unref(onTooltipKeydown)(_for_item0.value, $event));
-			let _index, _control;
+			const n14 = t2();
 			renderEffect(() => {
-				_index = _for_key0.value;
-				_control = unref(control);
-				setProp(n13, "id", unref(nativeIds)[_index]);
-				setProp(n13, "name", unref(nativeNames)[_index]);
-				setValue(n13, unref(normalizedValue)[_index]);
-				setProp(n13, "min", unref(nativeMin)[_index]);
-				setProp(n13, "max", unref(nativeMax)[_index]);
-				setProp(n13, "step", unref(nativeStep));
-				setProp(n13, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
-				setProp(n13, "disabled", _control.disabled || void 0);
-				setAttr(n13, "aria-label", unref(ariaLabels)[_index]);
-				setAttr(n13, "aria-describedby", _control.ariaDescribedby);
-				setAttr(n13, "aria-orientation", __props.orientation === "vertical" ? "vertical" : void 0);
-				setAttr(n13, "aria-valuetext", unref(ariaValueText)[_index]);
+				const _nativeInputAttrs = nativeInputAttrs.value;
+				const _index = _for_key0.value;
+				const _control = unref(control);
+				const _props = props;
+				const _nativeInputAttrs_index = _nativeInputAttrs[_index];
+				const _props_required_nativeInputAttrs_index_required = _props.required ?? _nativeInputAttrs_index?.required;
+				setDynamicProps(n14, [_nativeInputAttrs_index, {
+					id: unref(nativeIds)[_index],
+					name: unref(nativeNames)[_index],
+					form: _control.form ?? _nativeInputAttrs_index?.form,
+					type: "range",
+					value: unref(normalizedValue)[_index],
+					min: unref(nativeMin)[_index],
+					max: unref(nativeMax)[_index],
+					step: unref(nativeStep),
+					orient: __props.orientation === "vertical" ? "vertical" : void 0,
+					disabled: _control.disabled || void 0,
+					required: _props_required_nativeInputAttrs_index_required,
+					"aria-label": unref(ariaLabels)[_index],
+					"aria-describedby": _control.ariaDescribedby,
+					"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
+					"aria-valuetext": unref(ariaValueText)[_index],
+					"aria-invalid": _props.invalid === void 0 ? _nativeInputAttrs_index?.["aria-invalid"] : _control.invalid || void 0,
+					"aria-required": _props_required_nativeInputAttrs_index_required,
+					"data-thumb": _for_item0.value,
+					"data-disabled": unref(presence)(_control.disabled),
+					"data-invalid": unref(presence)(_control.invalid)
+				}]);
+				_setTemplateRef(n14, (element) => setInputRef(_index, element), true);
 			});
-			setClass(n13, ["rp-range-slider__native", `rp-range-slider__native--${_for_item0.value}`]);
-			return n13;
+			return n14;
 		}, (thumb, index) => thumb, 8);
-		setInsertionState(n33, n32, 2);
+		setInsertionState(n34, n33, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n22 = t6();
-			setInsertionState(n22, null, 0);
+			const n23 = t5();
+			setInsertionState(n23, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n21 = t5();
+				const n22 = t4();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setClassName(n21, _mark.filled ? 1 : 0, " rp-range-slider__mark--filled", "rp-range-slider__mark");
-					setStyle(n21, _mark.style);
+					setDynamicProps(n22, [unref(getPartAttrs)("mark", {
+						class: ["rp-range-slider__mark", { "rp-range-slider__mark--filled": _mark.filled }],
+						style: _mark.style
+					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n21, null, 1);
+				setInsertionState(n22, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n20 = t4();
-					const x20 = txt(n20);
-					renderEffect(() => setText(x20, toDisplayString(_for_item0.value.label)));
-					return n20;
+					const n21 = t3();
+					const x21 = txt(n21);
+					renderEffect(() => {
+						setDynamicProps(n21, [unref(getPartAttrs)("markLabel", { class: "rp-range-slider__mark-label" })]);
+						setText(x21, toDisplayString(_for_item0.value.label));
+					});
+					return n21;
 				});
-				return n21;
+				return n22;
 			}, (mark) => mark.key, 9);
-			return n22;
+			return n23;
 		});
-		setInsertionState(n31, null, 0);
+		setInsertionState(n32, null, 0);
 		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
-			const n27 = t7();
-			const n26 = child(n27);
-			renderEffect(() => setAttr(n27, "data-range-slider-thumb", _for_item0.value));
-			setInsertionState(n26, null, 0);
+			const n28 = t6();
+			const n27 = child(n28);
+			renderEffect(() => {
+				const _thumb = _for_item0.value;
+				setDynamicProps(n28, [unref(getPartAttrs)("thumb", { class: ["rp-range-slider__thumb", `rp-range-slider__thumb--${_thumb}`] }), {
+					"data-range-slider-thumb": _thumb,
+					"data-thumb": _thumb
+				}]);
+			});
+			setInsertionState(n27, null, 0);
 			createSlot("thumb", {
 				thumb: () => _for_item0.value,
 				index: () => _for_key0.value,
@@ -1471,10 +1714,9 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				formattedValue: () => unref(formattedValue)[_for_key0.value],
 				percent: () => unref(valuePercent)[_for_key0.value]
 			}, null, 1);
-			setClass(n27, ["rp-range-slider__thumb", `rp-range-slider__thumb--${_for_item0.value}`]);
-			return n27;
+			return n28;
 		}, (thumb, index) => thumb, 8);
-		setInsertionState(n31, null, 1);
+		setInsertionState(n32, null, 1);
 		createIf(() => unref(tooltipVisible), () => {
 			const _on_update_overlapping = ($event) => tooltipsOverlapping.value = $event;
 			return createComponent(range_slider_tooltip_default, {
@@ -1489,17 +1731,43 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				orientation: () => __props.orientation,
 				placement: () => unref(tooltipPlacement),
 				"value-percent": () => unref(valuePercent),
+				"tooltip-class": () => __props.classNames?.tooltip,
+				"tooltip-style": () => __props.styles?.tooltip,
 				"onUpdate:overlapping": () => _on_update_overlapping
 			});
 		});
-		n33.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
-		on(n33, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
-		on(n33, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
-		return n34;
+		n34.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
+		on(n34, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
+		on(n34, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
+		return n35;
 	}
-}), [["__scopeId", "data-v-8dd81f55"]]);
+}), [["__scopeId", "data-v-b0e2c3da"]]);
 //#endregion
 //#region src/components/slider/types.ts
+var sliderParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"range",
+	"input",
+	"thumb",
+	"mark",
+	"markLabel",
+	"tooltip"
+];
+var rangeSliderParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"range",
+	"input",
+	"thumb",
+	"mark",
+	"markLabel",
+	"tooltip"
+];
 var sliderColors = componentColors;
 var sliderSizes = [
 	"xs",
@@ -1510,4 +1778,4 @@ var sliderSizes = [
 ];
 var sliderOrientations = ["horizontal", "vertical"];
 //#endregion
-export { slider_default as a, range_slider_default as i, sliderOrientations as n, sliderSizes as r, sliderColors as t };
+export { sliderSizes as a, sliderParts as i, sliderColors as n, range_slider_default as o, sliderOrientations as r, slider_default as s, rangeSliderParts as t };