ropav 0.1.6 → 0.1.7

package/dist/slider.js

@@ -1,14 +1,22 @@
 import './slider.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as getComponentColorRoles, r as getComponentColorValue, t as componentColors } from "./componentColors.js";
+import { n as getValuePercent, t as clamp } from "./number.js";
+import { i as getComponentColorValue, r as getComponentColorRoles, t as componentColors } from "./componentColors.js";
 import { i as useFormControl } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { n as mergeAriaIdRefs } from "./aria.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, extend, 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
+import { t as toCssLength } from "./css.js";
+import { n as isMatchingPointer, t as getPointerId } from "./pointer.js";
+import { t as createRafScheduler } from "./rafScheduler.js";
+import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
+import { n as resolveTooltipColorStyleWithContrast, r as useDelayedOpen, t as tooltip_default } from "./tooltip.js";
+import { applyVShow, child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, 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/sliderModel.ts
 function normalizeSliderBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
 	const safeMax = Number.isFinite(max) ? max : safeMin;
@@ -26,25 +34,17 @@ function normalizeSliderStep(step) {
 function normalizeSliderValue(value, min, max, step) {
 	const bounds = normalizeSliderBounds(min, max);
 	const safeStep = normalizeSliderStep(step);
-	const safeValue = Number.isFinite(value) ? value : bounds.min;
-	const clamped = Math.min(bounds.max, Math.max(bounds.min, safeValue));
+	const clamped = clamp(Number.isFinite(value) ? value : bounds.min, bounds.min, bounds.max);
 	if (safeStep === "any") return clamped;
 	const steps = Math.round((clamped - bounds.min) / safeStep);
 	const snapped = bounds.min + steps * safeStep;
-	return Math.min(bounds.max, Math.max(bounds.min, Number(snapped.toFixed(10))));
-}
-function getSliderValuePercent(value, min, max) {
-	if (!Number.isFinite(value) || max <= min) return 0;
-	const percent = (value - min) / (max - min) * 100;
-	return Math.min(100, Math.max(0, percent));
+	return clamp(Number(snapped.toFixed(10)), bounds.min, bounds.max);
 }
 function setSliderStyleValue(style, property, value) {
 	if (value) style[property] = value;
 }
 function getSliderLengthValue(value) {
-	if (value == null || value === "") return void 0;
-	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
-	return value;
+	return toCssLength(value);
 }
 function getSliderBorderValue(value, borderColorProperty) {
 	if (value == null || value === "") return void 0;
@@ -78,7 +78,7 @@ function createSliderMarkItems(marks, min, max, isFilled, properties) {
 		if (mark.hidden) return [];
 		const value = Number(mark.value);
 		if (!Number.isFinite(value)) return [];
-		const percent = getSliderValuePercent(value, min, max);
+		const percent = getValuePercent(value, min, max);
 		return {
 			key: `${value}-${index}`,
 			value,
@@ -112,254 +112,199 @@ function getSliderTooltipAnchor(tooltip) {
 	return typeof tooltip === "object" && tooltip.anchor === "pointer" ? "pointer" : "thumb";
 }
 //#endregion
-//#region src/components/slider/useSlider.ts
-function getSliderColorValue(color) {
-	return getComponentColorValue(color);
-}
-function getSliderTrackStyle(props, valuePercent, tooltipPercent) {
-	const style = {
-		"--_rp-slider-percent": `${valuePercent}%`,
-		"--_rp-slider-ratio": `${valuePercent / 100}`,
-		"--_rp-slider-tooltip-percent": `${tooltipPercent}%`,
-		"--_rp-slider-tooltip-ratio": `${tooltipPercent / 100}`
-	};
-	setSliderStyleValue(style, "--_rp-slider-color", getSliderColorValue(props.color));
-	applySliderThumbStyle(style, getSliderThumbOptions(props.thumb), {
-		size: "--rp-slider-thumb-size",
-		border: "--_rp-slider-thumb-border-style",
-		padding: "--rp-slider-thumb-padding",
-		borderColor: "--_rp-slider-thumb-border"
-	});
-	return style;
+//#region src/components/slider/useSliderPointerPreview.ts
+function getPreviewRect(track, vertical) {
+	const travelRect = track.querySelector(".rp-slider__travel")?.getBoundingClientRect();
+	if (travelRect && (vertical ? travelRect.height > 0 : travelRect.width > 0)) return travelRect;
+	return track.getBoundingClientRect();
 }
-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(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));
-	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (_value, percent) => percent <= valuePercent.value, {
-		position: "--_rp-slider-mark-position",
-		decorativeColors: ["--_rp-slider-mark-color", "--_rp-slider-mark-ring-color"],
-		foregroundColors: ["--_rp-slider-mark-label-color", "--_rp-slider-mark-filled-label-color"]
-	}));
-	const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));
-	const tooltipAnchor = computed(() => getSliderTooltipAnchor(props.tooltip));
-	const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));
-	const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);
-	const { isOpen: delayedTooltipOpen, open: openDelayedTooltip, closeImmediate: closeDelayedTooltip } = useDelayedOpen({
-		openDelay: () => tooltipOpenDelay.value,
-		disabled: () => tooltipMode.value !== "hover" || control.disabled
-	});
-	const trackHovered = ref(false);
-	const focusWithin = ref(false);
+function useSliderPointerPreview(options) {
 	const dragging = ref(false);
 	const previewAvailable = ref(false);
-	const previewValue = ref(normalizedValue.value);
-	let dismissed = false;
+	const previewValue = ref(options.initialValue);
 	let dragView = null;
 	let dragPointerId;
 	let dragTrack = null;
-	let previewFrameView = null;
-	let previewFrameId;
 	let pendingPreview;
-	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
-	const thumbMode = computed(() => getSliderThumbMode(props.thumb));
-	const trackSlotProps = computed(() => ({
-		value: normalizedValue.value,
-		formattedValue: formattedValue.value,
-		percent: valuePercent.value,
-		min: bounds.value.min,
-		max: bounds.value.max,
-		orientation: props.orientation,
-		getPercent(value) {
-			return getSliderValuePercent(value, bounds.value.min, bounds.value.max);
-		}
-	}));
-	const tooltipVisible = computed(() => tooltipMode.value !== false);
-	const tooltipAlwaysVisible = computed(() => tooltipMode.value === "always");
-	const tooltipOpen = computed(() => tooltipAlwaysVisible.value || tooltipMode.value === "hover" && delayedTooltipOpen.value && !control.disabled);
-	const tooltipPlacement = computed(() => tooltipOptions.value.placement ?? (props.orientation === "vertical" ? "left" : "top"));
-	const tooltipId = computed(() => tooltipOptions.value.id);
-	const tooltipColor = computed(() => tooltipOptions.value.color);
-	const tooltipAutoContrast = computed(() => tooltipOptions.value.autoContrast);
-	const tooltipContrastColor = computed(() => tooltipOptions.value.contrastColor);
-	const tooltipOffset = computed(() => tooltipOptions.value.offset);
-	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
-	const tooltipValue = computed(() => tooltipAnchor.value === "pointer" && previewAvailable.value ? previewValue.value : normalizedValue.value);
-	const tooltipPercent = computed(() => getSliderValuePercent(tooltipValue.value, bounds.value.min, bounds.value.max));
-	const tooltipFormattedValue = computed(() => getFormattedSliderValue(tooltipValue.value, props.formatValue));
-	const tooltipContent = computed(() => String(tooltipFormattedValue.value));
-	const rootClass = computed(() => bem("rp-slider", {
-		[`size-${props.size}`]: Boolean(props.size),
-		vertical: props.orientation === "vertical",
-		marked: markItems.value.length > 0,
-		"marks-with-labels": hasMarkLabels.value,
-		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		"thumb-interaction": thumbMode.value === "interaction",
-		"thumb-hidden": thumbMode.value === false,
-		disabled: control.disabled,
-		invalid: control.invalid
-	}));
-	const trackStyle = computed(() => getSliderTrackStyle(props, valuePercent.value, tooltipPercent.value));
-	function onInput(e) {
-		if (control.disabled) return;
-		const input = e.target;
-		emitUpdate(normalizeSliderValue(input.valueAsNumber, bounds.value.min, bounds.value.max, nativeStep.value));
-	}
-	function hasTooltipInteraction() {
-		if (tooltipAnchor.value === "pointer") return previewAvailable.value && (trackHovered.value || dragging.value);
-		return trackHovered.value || focusWithin.value || dragging.value;
-	}
-	function syncTooltip() {
-		if (tooltipMode.value === "hover" && !control.disabled && hasTooltipInteraction() && !dismissed) {
-			openDelayedTooltip();
-			return;
-		}
-		closeDelayedTooltip();
-	}
-	function onTooltipTrackEnter(event) {
-		if (control.disabled) return;
-		if (tooltipAnchor.value === "pointer") {
-			cancelScheduledPreview();
-			previewAvailable.value = false;
-			const track = event.currentTarget;
-			if (track) updatePreviewFromPointer(event, track);
-		}
-		trackHovered.value = true;
-		dismissed = false;
-		syncTooltip();
-	}
-	function onTooltipTrackLeave() {
-		trackHovered.value = false;
-		if (!dragging.value && tooltipAnchor.value === "pointer") cancelScheduledPreview();
-		syncTooltip();
-	}
-	function onTooltipFocusIn() {
-		focusWithin.value = true;
-		dismissed = false;
-		syncTooltip();
-	}
-	function onTooltipFocusOut() {
-		focusWithin.value = false;
-		syncTooltip();
-	}
-	function removeDragListeners() {
-		dragView?.removeEventListener("pointermove", onTooltipWindowPointerMove);
-		dragView?.removeEventListener("pointerup", onTooltipPointerEnd);
-		dragView?.removeEventListener("pointercancel", onTooltipPointerEnd);
-		dragView = null;
-		dragPointerId = void 0;
-		dragTrack = null;
-	}
-	function cancelScheduledPreview() {
-		if (previewFrameId !== void 0) previewFrameView?.cancelAnimationFrame(previewFrameId);
-		previewFrameView = null;
-		previewFrameId = void 0;
-		pendingPreview = void 0;
-	}
-	function updatePreviewFromPointer(pointer, track) {
-		if (tooltipAnchor.value !== "pointer" || control.disabled) return false;
-		const vertical = props.orientation === "vertical";
-		const travelRect = track.querySelector(".rp-slider__travel")?.getBoundingClientRect();
-		const trackRect = track.getBoundingClientRect();
-		const rect = travelRect && (vertical ? travelRect.height > 0 : travelRect.width > 0) ? travelRect : trackRect;
+	const previewScheduler = createRafScheduler(applyScheduledPreview, () => pendingPreview?.track.ownerDocument.defaultView);
+	function updateFromPointer(pointer, track) {
+		if (!options.enabled() || options.disabled()) return false;
+		const vertical = options.orientation() === "vertical";
+		const rect = getPreviewRect(track, vertical);
 		const length = vertical ? rect.height : rect.width;
 		if (length <= 0) return false;
-		const offset = vertical ? rect.bottom - pointer.clientY : pointer.clientX - rect.left;
-		const ratio = Math.min(1, Math.max(0, offset / length));
-		const rawValue = bounds.value.min + ratio * (bounds.value.max - bounds.value.min);
-		previewValue.value = normalizeSliderValue(rawValue, bounds.value.min, bounds.value.max, nativeStep.value);
+		const ratio = clamp((vertical ? rect.bottom - pointer.clientY : pointer.clientX - rect.left) / length, 0, 1);
+		const bounds = options.bounds.value;
+		const rawValue = bounds.min + ratio * (bounds.max - bounds.min);
+		previewValue.value = normalizeSliderValue(rawValue, bounds.min, bounds.max, options.step.value);
 		previewAvailable.value = true;
 		return true;
 	}
 	function applyScheduledPreview() {
 		const pending = pendingPreview;
 		pendingPreview = void 0;
-		if (pending && updatePreviewFromPointer(pending, pending.track)) syncTooltip();
-	}
-	function onPreviewAnimationFrame() {
-		previewFrameView = null;
-		previewFrameId = void 0;
-		applyScheduledPreview();
+		if (pending && updateFromPointer(pending, pending.track)) options.onStateChange();
 	}
 	function schedulePreview(event, track) {
-		if (tooltipAnchor.value !== "pointer" || control.disabled) return;
+		if (!options.enabled() || options.disabled()) return;
 		pendingPreview = {
 			clientX: event.clientX,
 			clientY: event.clientY,
 			track
 		};
-		const view = track.ownerDocument.defaultView;
-		if (!view?.requestAnimationFrame) {
-			applyScheduledPreview();
-			return;
-		}
-		if (previewFrameId !== void 0) return;
-		previewFrameView = view;
-		previewFrameId = view.requestAnimationFrame(onPreviewAnimationFrame);
+		previewScheduler.schedule();
 	}
-	function onTooltipPointerMove(event) {
-		if (dragPointerId !== void 0 && dragging.value && event.pointerId !== dragPointerId) return;
+	function cancelScheduledPreview() {
+		previewScheduler.cancel();
+		pendingPreview = void 0;
+	}
+	function removeDragListeners() {
+		dragView?.removeEventListener("pointermove", onWindowPointerMove);
+		dragView?.removeEventListener("pointerup", onPointerEnd);
+		dragView?.removeEventListener("pointercancel", onPointerEnd);
+		dragView = null;
+		dragPointerId = void 0;
+		dragTrack = null;
+	}
+	function onPointerMove(event) {
+		if (dragging.value && !isMatchingPointer(event, dragPointerId)) return;
 		const track = event.currentTarget;
 		if (track) schedulePreview(event, track);
 	}
-	function onTooltipWindowPointerMove(event) {
-		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
+	function onWindowPointerMove(event) {
+		if (!isMatchingPointer(event, dragPointerId)) return;
 		if (dragTrack) schedulePreview(event, dragTrack);
 	}
-	function onTooltipPointerEnd(event) {
-		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
+	function onPointerEnd(event) {
+		if (!isMatchingPointer(event, dragPointerId)) return;
 		cancelScheduledPreview();
-		if (dragTrack) updatePreviewFromPointer(event, dragTrack);
+		if (dragTrack) updateFromPointer(event, dragTrack);
 		dragging.value = false;
 		removeDragListeners();
-		syncTooltip();
+		options.onStateChange();
 	}
-	function onTooltipPointerDown(event) {
-		if (control.disabled || event.button !== 0 || event.isPrimary === false) return;
+	function onPointerDown(event) {
+		if (options.disabled() || event.button !== 0 || event.isPrimary === false) return false;
 		removeDragListeners();
-		dismissed = false;
 		dragging.value = true;
-		dragPointerId = Number.isFinite(event.pointerId) ? event.pointerId : void 0;
+		dragPointerId = getPointerId(event);
 		dragTrack = event.currentTarget;
-		if (dragTrack) updatePreviewFromPointer(event, dragTrack);
+		if (dragTrack) updateFromPointer(event, dragTrack);
 		dragView = dragTrack?.ownerDocument.defaultView ?? null;
-		dragView?.addEventListener("pointermove", onTooltipWindowPointerMove);
-		dragView?.addEventListener("pointerup", onTooltipPointerEnd);
-		dragView?.addEventListener("pointercancel", onTooltipPointerEnd);
-		syncTooltip();
+		dragView?.addEventListener("pointermove", onWindowPointerMove);
+		dragView?.addEventListener("pointerup", onPointerEnd);
+		dragView?.addEventListener("pointercancel", onPointerEnd);
+		return true;
 	}
-	function onTooltipKeydown(event) {
-		if (event.key === "Escape") {
-			dismissed = true;
-			closeDelayedTooltip();
-		}
+	function onTrackEnter(event) {
+		if (!options.enabled()) return;
+		cancelScheduledPreview();
+		previewAvailable.value = false;
+		const track = event.currentTarget;
+		if (track) updateFromPointer(event, track);
+	}
+	function onTrackLeave() {
+		if (!dragging.value && options.enabled()) cancelScheduledPreview();
 	}
 	onBeforeUnmount(() => {
 		removeDragListeners();
 		cancelScheduledPreview();
 	});
 	return {
-		control,
-		nativeMin: computed(() => bounds.value.min),
-		nativeMax: computed(() => bounds.value.max),
-		nativeStep,
-		rootClass,
-		normalizedValue,
-		valuePercent,
-		formattedValue,
-		ariaValueText,
-		markItems,
-		thumbMode,
-		trackSlotProps,
-		trackStyle,
-		trackHovered,
 		dragging,
+		previewAvailable,
+		previewValue,
+		onPointerDown,
+		onPointerMove,
+		onTrackEnter,
+		onTrackLeave
+	};
+}
+//#endregion
+//#region src/components/slider/useSliderTooltipState.ts
+function useSliderTooltipState(options) {
+	const tooltipOptions = computed(() => getSliderTooltipOptions(options.tooltip()));
+	const tooltipAnchor = computed(() => getSliderTooltipAnchor(options.tooltip()));
+	const tooltipMode = computed(() => getSliderTooltipMode(options.tooltip()));
+	const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);
+	const delayedTooltip = useDelayedOpen({
+		openDelay: () => tooltipOpenDelay.value,
+		disabled: () => tooltipMode.value !== "hover" || options.disabled()
+	});
+	const trackHovered = ref(false);
+	const focusWithin = ref(false);
+	let dismissed = false;
+	const pointerPreview = useSliderPointerPreview({
+		enabled: () => tooltipAnchor.value === "pointer",
+		disabled: options.disabled,
+		orientation: options.orientation,
+		bounds: options.bounds,
+		step: options.step,
+		initialValue: options.value.value,
+		onStateChange: syncTooltip
+	});
+	function hasTooltipInteraction() {
+		if (tooltipAnchor.value === "pointer") return pointerPreview.previewAvailable.value && (trackHovered.value || pointerPreview.dragging.value);
+		return trackHovered.value || focusWithin.value || pointerPreview.dragging.value;
+	}
+	function syncTooltip() {
+		if (tooltipMode.value === "hover" && !options.disabled() && hasTooltipInteraction() && !dismissed) {
+			delayedTooltip.open();
+			return;
+		}
+		delayedTooltip.closeImmediate();
+	}
+	function onTooltipTrackEnter(event) {
+		if (options.disabled()) return;
+		pointerPreview.onTrackEnter(event);
+		trackHovered.value = true;
+		dismissed = false;
+		syncTooltip();
+	}
+	function onTooltipTrackLeave() {
+		trackHovered.value = false;
+		pointerPreview.onTrackLeave();
+		syncTooltip();
+	}
+	function onTooltipFocusIn() {
+		focusWithin.value = true;
+		dismissed = false;
+		syncTooltip();
+	}
+	function onTooltipFocusOut() {
+		focusWithin.value = false;
+		syncTooltip();
+	}
+	function onTooltipPointerDown(event) {
+		if (!pointerPreview.onPointerDown(event)) return;
+		dismissed = false;
+		syncTooltip();
+	}
+	function onTooltipKeydown(event) {
+		if (event.key !== "Escape") return;
+		dismissed = true;
+		delayedTooltip.closeImmediate();
+	}
+	const tooltipVisible = computed(() => tooltipMode.value !== false);
+	const tooltipAlwaysVisible = computed(() => tooltipMode.value === "always");
+	const tooltipOpen = computed(() => tooltipAlwaysVisible.value || tooltipMode.value === "hover" && delayedTooltip.isOpen.value && !options.disabled());
+	const tooltipPlacement = computed(() => tooltipOptions.value.placement ?? (options.orientation() === "vertical" ? "left" : "top"));
+	const tooltipId = computed(() => tooltipOptions.value.id);
+	const tooltipColor = computed(() => tooltipOptions.value.color);
+	const tooltipAutoContrast = computed(() => tooltipOptions.value.autoContrast);
+	const tooltipContrastColor = computed(() => tooltipOptions.value.contrastColor);
+	const tooltipOffset = computed(() => tooltipOptions.value.offset);
+	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
+	const tooltipValue = computed(() => tooltipAnchor.value === "pointer" && pointerPreview.previewAvailable.value ? pointerPreview.previewValue.value : options.value.value);
+	const tooltipPercent = computed(() => getValuePercent(tooltipValue.value, options.bounds.value.min, options.bounds.value.max));
+	const tooltipFormattedValue = computed(() => getFormattedSliderValue(tooltipValue.value, options.formatValue()));
+	const tooltipContent = computed(() => String(tooltipFormattedValue.value));
+	return {
+		trackHovered,
+		dragging: pointerPreview.dragging,
 		tooltipVisible,
 		tooltipOpen,
+		tooltipAlwaysVisible,
 		tooltipAnchor,
 		tooltipPlacement,
 		tooltipId,
@@ -373,9 +318,8 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		tooltipPercent,
 		tooltipFormattedValue,
 		tooltipContent,
-		onInput,
 		onTooltipPointerDown,
-		onTooltipPointerMove,
+		onTooltipPointerMove: pointerPreview.onPointerMove,
 		onTooltipTrackEnter,
 		onTooltipTrackLeave,
 		onTooltipFocusIn,
@@ -384,19 +328,178 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 	};
 }
 //#endregion
+//#region src/components/slider/useSliderValueState.ts
+function useSliderValueState(props, onChange) {
+	const inputRef = ref(null);
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? props.min,
+		onChange
+	});
+	const control = useControlState(props);
+	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
+	const nativeMin = computed(() => bounds.value.min);
+	const nativeMax = computed(() => bounds.value.max);
+	const nativeStep = computed(() => normalizeSliderStep(props.step));
+	const normalizedValue = computed(() => normalizeSliderValue(controllable.value.value, bounds.value.min, bounds.value.max, nativeStep.value));
+	const valuePercent = computed(() => getValuePercent(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));
+	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (_value, percent) => percent <= valuePercent.value, {
+		position: "--_rp-slider-mark-position",
+		decorativeColors: ["--_rp-slider-mark-color", "--_rp-slider-mark-ring-color"],
+		foregroundColors: ["--_rp-slider-mark-label-color", "--_rp-slider-mark-filled-label-color"]
+	}));
+	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
+	const trackSlotProps = computed(() => ({
+		value: normalizedValue.value,
+		formattedValue: formattedValue.value,
+		percent: valuePercent.value,
+		min: bounds.value.min,
+		max: bounds.value.max,
+		orientation: props.orientation,
+		getPercent(value) {
+			return getValuePercent(value, bounds.value.min, bounds.value.max);
+		}
+	}));
+	function onInput(event) {
+		if (control.disabled) return;
+		const input = event.target;
+		controllable.setValue(normalizeSliderValue(input.valueAsNumber, bounds.value.min, bounds.value.max, nativeStep.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);
+		}
+	});
+	function focus(options) {
+		inputRef.value?.focus(options);
+	}
+	return {
+		inputRef,
+		focus,
+		control,
+		bounds,
+		nativeMin,
+		nativeMax,
+		nativeStep,
+		normalizedValue,
+		valuePercent,
+		formattedValue,
+		ariaValueText,
+		markItems,
+		hasMarkLabels,
+		trackSlotProps,
+		onInput
+	};
+}
+//#endregion
+//#region src/components/slider/useSlider.ts
+function getSliderTrackStyle(props, valuePercent, tooltipPercent) {
+	const style = {
+		"--_rp-slider-percent": `${valuePercent}%`,
+		"--_rp-slider-ratio": `${valuePercent / 100}`,
+		"--_rp-slider-tooltip-percent": `${tooltipPercent}%`,
+		"--_rp-slider-tooltip-ratio": `${tooltipPercent / 100}`
+	};
+	setSliderStyleValue(style, "--_rp-slider-color", getComponentColorValue(props.color));
+	applySliderThumbStyle(style, getSliderThumbOptions(props.thumb), {
+		size: "--rp-slider-thumb-size",
+		border: "--_rp-slider-thumb-border-style",
+		padding: "--rp-slider-thumb-padding",
+		borderColor: "--_rp-slider-thumb-border"
+	});
+	return style;
+}
+function useSlider(props, onChange) {
+	const valueState = useSliderValueState(props, onChange);
+	const tooltipState = useSliderTooltipState({
+		tooltip: () => props.tooltip,
+		orientation: () => props.orientation,
+		disabled: () => valueState.control.disabled,
+		value: valueState.normalizedValue,
+		bounds: valueState.bounds,
+		step: valueState.nativeStep,
+		formatValue: () => props.formatValue
+	});
+	const thumbMode = computed(() => getSliderThumbMode(props.thumb));
+	const rootClass = computed(() => bem("rp-slider", {
+		[`size-${props.size}`]: Boolean(props.size),
+		vertical: props.orientation === "vertical",
+		marked: valueState.markItems.value.length > 0,
+		"marks-with-labels": valueState.hasMarkLabels.value,
+		"tooltip-always-visible": tooltipState.tooltipAlwaysVisible.value,
+		"thumb-interaction": thumbMode.value === "interaction",
+		"thumb-hidden": thumbMode.value === false,
+		disabled: valueState.control.disabled,
+		invalid: valueState.control.invalid
+	}));
+	const trackStyle = computed(() => getSliderTrackStyle(props, valueState.valuePercent.value, tooltipState.tooltipPercent.value));
+	return {
+		inputRef: valueState.inputRef,
+		focus: valueState.focus,
+		control: valueState.control,
+		nativeMin: valueState.nativeMin,
+		nativeMax: valueState.nativeMax,
+		nativeStep: valueState.nativeStep,
+		rootClass,
+		normalizedValue: valueState.normalizedValue,
+		valuePercent: valueState.valuePercent,
+		formattedValue: valueState.formattedValue,
+		ariaValueText: valueState.ariaValueText,
+		markItems: valueState.markItems,
+		thumbMode,
+		trackSlotProps: valueState.trackSlotProps,
+		trackStyle,
+		trackHovered: tooltipState.trackHovered,
+		dragging: tooltipState.dragging,
+		tooltipVisible: tooltipState.tooltipVisible,
+		tooltipOpen: tooltipState.tooltipOpen,
+		tooltipAnchor: tooltipState.tooltipAnchor,
+		tooltipPlacement: tooltipState.tooltipPlacement,
+		tooltipId: tooltipState.tooltipId,
+		tooltipColor: tooltipState.tooltipColor,
+		tooltipAutoContrast: tooltipState.tooltipAutoContrast,
+		tooltipContrastColor: tooltipState.tooltipContrastColor,
+		tooltipOffset: tooltipState.tooltipOffset,
+		tooltipOpenDelay: tooltipState.tooltipOpenDelay,
+		tooltipArrow: tooltipState.tooltipArrow,
+		tooltipValue: tooltipState.tooltipValue,
+		tooltipPercent: tooltipState.tooltipPercent,
+		tooltipFormattedValue: tooltipState.tooltipFormattedValue,
+		tooltipContent: tooltipState.tooltipContent,
+		onInput: valueState.onInput,
+		onTooltipPointerDown: tooltipState.onTooltipPointerDown,
+		onTooltipPointerMove: tooltipState.onTooltipPointerMove,
+		onTooltipTrackEnter: tooltipState.onTooltipTrackEnter,
+		onTooltipTrackLeave: tooltipState.onTooltipTrackLeave,
+		onTooltipFocusIn: tooltipState.onTooltipFocusIn,
+		onTooltipFocusOut: tooltipState.onTooltipFocusOut,
+		onTooltipKeydown: tooltipState.onTooltipKeydown
+	};
+}
+//#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<span data-v-c850c027>");
-var t1$2 = template("<span data-v-c850c027 class=rp-slider__header>");
-var t2$2 = template("<span data-v-c850c027 class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
-var t3$2 = template("<span data-v-c850c027 class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
-var t4$2 = template("<span data-v-c850c027 class=rp-slider__travel aria-hidden=true>", 2);
-var t5$1 = template("<span data-v-c850c027> ");
-var t6$1 = template("<span data-v-c850c027><span data-v-c850c027 class=rp-slider__mark-dot></span>");
-var t7$1 = template("<span data-v-c850c027 class=rp-slider__marks aria-hidden=true>");
-var t8$1 = template("<span data-v-c850c027 class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
+var t0$2 = template("<span data-v-f21fa11c>");
+var t1$2 = template("<span data-v-f21fa11c class=rp-slider__header>");
+var t2$2 = template("<span data-v-f21fa11c class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
+var t3$2 = template("<span data-v-f21fa11c class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
+var t4$2 = template("<span data-v-f21fa11c class=rp-slider__travel aria-hidden=true>", 2);
+var t5$1 = template("<span data-v-f21fa11c> ");
+var t6$1 = template("<span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__mark-dot></span>");
+var t7$1 = template("<span data-v-f21fa11c class=rp-slider__marks aria-hidden=true>");
+var t8$1 = template("<span data-v-f21fa11c class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
 var t9$1 = template(" ");
-var t10 = template("<label data-v-c850c027><span data-v-c850c027><span data-v-c850c027 class=rp-slider__rail aria-hidden=true></span><!><span data-v-c850c027></span><!><input data-v-c850c027><!><span data-v-c850c027><span data-v-c850c027 class=rp-slider__thumb-content>", 1);
-delegateEvents("pointerdown", "pointermove", "focusin", "focusout", "keydown");
+var t10 = template("<label data-v-f21fa11c><span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__rail aria-hidden=true></span><!><span data-v-f21fa11c></span><!><input data-v-f21fa11c><!><span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__thumb-content>", 1);
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -459,36 +562,16 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
-		const inputRef = ref(null);
-		const controllable = useControllableValue({
-			modelValue: () => props.modelValue,
-			defaultValue: () => props.defaultValue ?? props.min,
-			onChange: (value) => emit("update:modelValue", value)
-		});
-		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTooltipPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, 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);
-			}
-		});
+		const { inputRef, focus, control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTooltipPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => emit("update:modelValue", value));
 		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-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
 			"data-orientation": props.orientation,
-			"data-track-hovered": presence(trackHovered.value),
-			"data-dragging": presence(dragging.value),
+			"data-track-hovered": toPresenceAttribute(trackHovered.value),
+			"data-dragging": toPresenceAttribute(dragging.value),
 			"data-thumb-visibility": thumbMode.value === false ? "hidden" : thumbMode.value
 		}));
 		const tooltipClassNames = computed(() => ({
@@ -497,23 +580,18 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		}));
 		const tooltipStyles = computed(() => ({ root: props.styles?.tooltip }));
 		const nativeInputAttrs = computed(() => {
-			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, ...attrs } = props.inputAttrs ?? {};
+			const inputAttrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(inputAttrs);
 			return {
-				...attrs,
+				...forwardedAttributes,
 				...getPartAttrs("input", {
 					class: "rp-slider__native",
 					compatibilityClass,
 					compatibilityStyle
 				}),
-				onInput(event) {
-					onInput(event);
-					compatibilityOnInput?.(event);
-				}
+				onInput: composeEventHandlers(onInput, inputAttrs.onInput)
 			};
 		});
-		function focus(options) {
-			inputRef.value?.focus(options);
-		}
 		__expose({
 			nativeElement: inputRef,
 			focus
@@ -599,8 +677,8 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"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)
+				"data-disabled": unref(toPresenceAttribute)(_control.disabled),
+				"data-invalid": unref(toPresenceAttribute)(_control.invalid)
 			}]);
 		});
 		setInsertionState(n45, n47, 6);
@@ -614,7 +692,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					setDynamicProps(n31, [unref(getPartAttrs)("mark", {
 						class: ["rp-slider__mark", { "rp-slider__mark--filled": _mark.filled }],
 						style: _mark.style
-					}), { "data-filled": unref(presence)(_mark.filled) }]);
+					}), { "data-filled": unref(toPresenceAttribute)(_mark.filled) }]);
 				});
 				setInsertionState(n31, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
@@ -671,16 +749,16 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				}
 			});
 		});
-		n45.$evtpointerdown = createInvoker((e) => unref(onTooltipPointerDown)(e));
+		on(n45, "pointerdown", (e) => unref(onTooltipPointerDown)(e));
 		on(n45, "pointerenter", (e) => unref(onTooltipTrackEnter)(e));
 		on(n45, "pointerleave", (e) => unref(onTooltipTrackLeave)(e));
-		n45.$evtpointermove = createInvoker((e) => unref(onTooltipPointerMove)(e));
-		n45.$evtfocusin = createInvoker((e) => unref(onTooltipFocusIn)(e));
-		n45.$evtfocusout = createInvoker((e) => unref(onTooltipFocusOut)(e));
-		n45.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
+		on(n45, "pointermove", (e) => unref(onTooltipPointerMove)(e));
+		on(n45, "focusin", (e) => unref(onTooltipFocusIn)(e));
+		on(n45, "focusout", (e) => unref(onTooltipFocusOut)(e));
+		on(n45, "keydown", (e) => unref(onTooltipKeydown)(e));
 		return n48;
 	}
-}), [["__scopeId", "data-v-c850c027"]]);
+}), [["__scopeId", "data-v-f21fa11c"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -745,8 +823,6 @@ function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement
 		height: 0
 	});
 	let resizeObserver;
-	let frameWindow;
-	let frameId;
 	let destroyed = false;
 	function setOverlapping(value) {
 		if (tooltipsOverlapping.value !== value) tooltipsOverlapping.value = value;
@@ -784,19 +860,9 @@ function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement
 		};
 		updateCollision();
 	}
+	const measureScheduler = createRafScheduler(measureSizes, () => root.value?.ownerDocument.defaultView);
 	function scheduleMeasure() {
-		if (destroyed || frameId != null) return;
-		const view = root.value?.ownerDocument.defaultView;
-		if (!view?.requestAnimationFrame) {
-			measureSizes();
-			return;
-		}
-		frameWindow = view;
-		frameId = view.requestAnimationFrame(() => {
-			frameId = void 0;
-			frameWindow = void 0;
-			measureSizes();
-		});
+		if (!destroyed) measureScheduler.schedule();
 	}
 	function refreshObservedElements() {
 		if (!resizeObserver) return;
@@ -862,7 +928,7 @@ function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement
 		destroyed = true;
 		(root.value?.ownerDocument.defaultView)?.removeEventListener("resize", onWindowResize);
 		resizeObserver?.disconnect();
-		if (frameId != null) frameWindow?.cancelAnimationFrame(frameId);
+		measureScheduler.cancel();
 	});
 	return {
 		tooltipsOverlapping,
@@ -872,11 +938,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-031ced3e class=rp-range-slider__tooltip-merged-value> </span>");
-var t1$1 = template("<span data-v-031ced3e class=rp-range-slider__tooltip-merged-value> ");
-var t2$1 = template("<span data-v-031ced3e class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
+var t0$1 = template("<span data-v-da6906b9 class=rp-range-slider__tooltip-merged-value> </span>");
+var t1$1 = template("<span data-v-da6906b9 class=rp-range-slider__tooltip-merged-value> ");
+var t2$1 = template("<span data-v-da6906b9 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
 var t3$1 = template(" ");
-var t4$1 = template("<span data-v-031ced3e aria-hidden=true><span data-v-031ced3e data-thumb=lower><span data-v-031ced3e class=rp-range-slider__tooltip-anchor></span><span data-v-031ced3e class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-031ced3e data-thumb=upper><span data-v-031ced3e class=rp-range-slider__tooltip-anchor></span><span data-v-031ced3e class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-031ced3e data-thumb=merged><span data-v-031ced3e class=rp-range-slider__tooltip-anchor></span><span data-v-031ced3e class=rp-tooltip__content aria-hidden=true>", 1);
+var t4$1 = template("<span data-v-da6906b9 aria-hidden=true><span data-v-da6906b9 data-thumb=lower><span data-v-da6906b9 class=rp-range-slider__tooltip-anchor></span><span data-v-da6906b9 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-da6906b9 data-thumb=upper><span data-v-da6906b9 class=rp-range-slider__tooltip-anchor></span><span data-v-da6906b9 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-da6906b9 data-thumb=merged><span data-v-da6906b9 class=rp-range-slider__tooltip-anchor></span><span data-v-da6906b9 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({
@@ -919,6 +985,10 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 	},
 	emits: ["update:overlapping"],
 	setup(__props, { emit: __emit }) {
+		const TOOLTIP_OFFSET_PROPERTIES = {
+			mainAxis: "--_rp-tooltip-main-axis-offset",
+			crossAxis: "--_rp-tooltip-cross-axis-offset"
+		};
 		const props = __props;
 		const emit = __emit;
 		const generatedId = useId();
@@ -933,7 +1003,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			open: props.open
 		}));
 		const contentStyle = computed(() => ({
-			...resolveTooltipOffsetStyle(props.offset),
+			...getFloatingOffsetStyle(props.offset, TOOLTIP_OFFSET_PROPERTIES),
 			...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast, props.contrastColor)
 		}));
 		const { tooltipsOverlapping, mergedArrowOffset, mergedMinSize } = useRangeSliderTooltipCollision({
@@ -1051,20 +1121,128 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		_setTemplateRef(n16, tooltipLayerRef, null, "tooltipLayerRef");
 		return n16;
 	}
-}), [["__scopeId", "data-v-031ced3e"]]);
+}), [["__scopeId", "data-v-da6906b9"]]);
+//#endregion
+//#region src/components/slider/rangeSliderModel.ts
+function roundSliderNumber(value) {
+	return Number(value.toFixed(10));
+}
+function getStepValueAtOrAbove(value, min, step) {
+	if (step === "any") return value;
+	return roundSliderNumber(min + Math.ceil((value - min) / step - 1e-10) * step);
+}
+function getStepValueAtOrBelow(value, min, step) {
+	if (step === "any") return value;
+	return roundSliderNumber(min + Math.floor((value - min) / step + 1e-10) * step);
+}
+function isSliderStepAligned(min, max, step) {
+	const stepCount = (max - min) / step;
+	return Math.abs(stepCount - Math.round(stepCount)) <= 1e-10;
+}
+function normalizeRangeSliderMinRange(minRange, min, max) {
+	const bounds = normalizeSliderBounds(min, max);
+	const domain = bounds.max - bounds.min;
+	return Math.min(domain, Number.isFinite(minRange) && minRange > 0 ? minRange : 0);
+}
+function normalizeRangeSliderValue(value, min, max, step, minRange = 0) {
+	const bounds = normalizeSliderBounds(min, max);
+	const safeStep = normalizeSliderStep(step);
+	const safeMinRange = normalizeRangeSliderMinRange(minRange, bounds.min, bounds.max);
+	const first = normalizeSliderValue(Array.isArray(value) ? Number(value[0]) : NaN, bounds.min, bounds.max, safeStep);
+	const second = normalizeSliderValue(Array.isArray(value) ? Number(value[1]) : NaN, bounds.min, bounds.max, safeStep);
+	const lower = Math.min(first, second);
+	const upper = Math.max(first, second);
+	if (upper - lower >= safeMinRange) return [lower, upper];
+	if (safeMinRange >= bounds.max - bounds.min) return [bounds.min, bounds.max];
+	const expandedUpper = getStepValueAtOrAbove(lower + safeMinRange, bounds.min, safeStep);
+	if (expandedUpper <= bounds.max) return [lower, expandedUpper];
+	const expandedLower = getStepValueAtOrBelow(bounds.max - safeMinRange, bounds.min, safeStep);
+	return [Math.max(bounds.min, expandedLower), bounds.max];
+}
+function getClosestRangeSliderThumb(value, range, activeThumb) {
+	const [lower, upper] = range;
+	if (value < lower) return "lower";
+	if (value > upper) return "upper";
+	const lowerDistance = Math.abs(value - lower);
+	const upperDistance = Math.abs(value - upper);
+	if (lowerDistance < upperDistance) return "lower";
+	if (upperDistance < lowerDistance) return "upper";
+	return activeThumb ?? "upper";
+}
+function getRangeSliderNativeStep(bounds, step) {
+	if (step === "any") return step;
+	return isSliderStepAligned(bounds.min, bounds.max, step) ? step : "any";
+}
+function getRangeSliderNativeLimits(value, bounds, step, minRange) {
+	if (minRange === 0) return {
+		min: [bounds.min, bounds.min],
+		max: [bounds.max, bounds.max]
+	};
+	return {
+		min: [bounds.min, clamp(getStepValueAtOrAbove(value[0] + minRange, bounds.min, step), bounds.min, bounds.max)],
+		max: [clamp(getStepValueAtOrBelow(value[1] - minRange, bounds.min, step), bounds.min, bounds.max), bounds.max]
+	};
+}
+function getRangeSliderThumbUpdate({ thumb, value, currentValue, bounds, step, minRange, nativeMin, nativeMax, anchorValue = currentValue[getRangeSliderThumbIndex(getOppositeRangeSliderThumb(thumb))] }) {
+	const safeValue = normalizeSliderValue(value, bounds.min, bounds.max, step);
+	if (minRange > 0) {
+		const nextValue = [...currentValue];
+		nextValue[getRangeSliderThumbIndex(thumb)] = thumb === "lower" ? Math.min(safeValue, nativeMax[0]) : Math.max(safeValue, nativeMin[1]);
+		return {
+			thumb,
+			value: nextValue
+		};
+	}
+	if (safeValue < anchorValue) return {
+		thumb: "lower",
+		value: [safeValue, anchorValue]
+	};
+	if (safeValue > anchorValue) return {
+		thumb: "upper",
+		value: [anchorValue, safeValue]
+	};
+	return {
+		thumb,
+		value: [safeValue, safeValue]
+	};
+}
+function getFormattedRangeSliderValue(value, formatter) {
+	return [getFormattedSliderValue(value[0], formatter), getFormattedSliderValue(value[1], formatter)];
+}
+function getRangeSliderAriaValueText(value, ariaValueText, formatter) {
+	const endpointValues = Array.isArray(ariaValueText) ? ariaValueText : [ariaValueText, ariaValueText];
+	return [getSliderAriaValueText(value[0], endpointValues[0], formatter), getSliderAriaValueText(value[1], endpointValues[1], formatter)];
+}
+function getRangeSliderThumbIndex(thumb) {
+	return thumb === "lower" ? 0 : 1;
+}
+function getOppositeRangeSliderThumb(thumb) {
+	return thumb === "lower" ? "upper" : "lower";
+}
+function getRangeSliderKeyboardValue(key, currentValue, step, min, max) {
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return currentValue + step;
+		case "ArrowLeft":
+		case "ArrowDown": return currentValue - step;
+		case "PageUp": return currentValue + step * 10;
+		case "PageDown": return currentValue - step * 10;
+		case "Home": return min;
+		case "End": return max;
+		default: return;
+	}
+}
+function getRangeSliderPointerValue(pointer, geometry, bounds) {
+	const pointerPosition = geometry.vertical ? pointer.clientY : pointer.clientX;
+	const ratio = clamp((geometry.vertical ? geometry.start - pointerPosition : pointerPosition - geometry.start) / geometry.length, 0, 1);
+	return bounds.min + ratio * (bounds.max - bounds.min);
+}
 //#endregion
 //#region src/components/slider/useRangeSliderPointer.ts
 function useRangeSliderPointer(options) {
 	let session;
-	let frameWindow = null;
-	let frameId;
 	let pendingPointerEvent;
 	let geometryDirty = false;
-	function cancelScheduledFrame() {
-		if (frameId !== void 0) frameWindow?.cancelAnimationFrame(frameId);
-		frameWindow = null;
-		frameId = void 0;
-	}
 	function refreshGeometry() {
 		const currentSession = session;
 		if (!currentSession) return false;
@@ -1081,24 +1259,13 @@ function useRangeSliderPointer(options) {
 		pendingPointerEvent = void 0;
 		if (event && isCurrentPointer(event)) updateFromPointer(event);
 	}
+	const updateScheduler = createRafScheduler(applyScheduledUpdate, () => session?.view);
 	function flushScheduledUpdate() {
-		cancelScheduledFrame();
-		applyScheduledUpdate();
-	}
-	function onAnimationFrame() {
-		frameWindow = null;
-		frameId = void 0;
+		updateScheduler.cancel();
 		applyScheduledUpdate();
 	}
 	function scheduleUpdate() {
-		const view = session?.view;
-		if (!view?.requestAnimationFrame) {
-			flushScheduledUpdate();
-			return;
-		}
-		if (frameId !== void 0) return;
-		frameWindow = view;
-		frameId = view.requestAnimationFrame(onAnimationFrame);
+		if (session) updateScheduler.schedule();
 	}
 	function onGeometryChange() {
 		if (!session) return;
@@ -1113,7 +1280,7 @@ function useRangeSliderPointer(options) {
 		stoppedSession.view?.removeEventListener("pointercancel", onPointerEnd);
 		stoppedSession.view?.removeEventListener("resize", onGeometryChange);
 		stoppedSession.view?.removeEventListener("scroll", onGeometryChange, true);
-		cancelScheduledFrame();
+		updateScheduler.cancel();
 		pendingPointerEvent = void 0;
 		geometryDirty = false;
 		session = void 0;
@@ -1136,7 +1303,7 @@ function useRangeSliderPointer(options) {
 		switchDraggingThumb(options.updateThumb(currentSession.thumb, value, currentSession.anchorValue));
 	}
 	function isCurrentPointer(event) {
-		return session?.pointerId === void 0 || event.pointerId === session.pointerId;
+		return isMatchingPointer(event, session?.pointerId);
 	}
 	function onPointerMove(event) {
 		if (!isCurrentPointer(event)) return;
@@ -1168,7 +1335,7 @@ function useRangeSliderPointer(options) {
 			geometry,
 			thumb,
 			anchorValue: options.getAnchorValue(thumb),
-			pointerId: Number.isFinite(event.pointerId) ? event.pointerId : void 0
+			pointerId: getPointerId(event)
 		};
 		options.startDrag(thumb);
 		switchDraggingThumb(options.updateThumb(thumb, pointerValue, session.anchorValue));
@@ -1281,55 +1448,132 @@ function useRangeSliderTooltipState(options) {
 	};
 }
 //#endregion
-//#region src/components/slider/useRangeSlider.ts
-function roundSliderNumber(value) {
-	return Number(value.toFixed(10));
-}
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
-function getStepValueAtOrAbove(value, min, step) {
-	if (step === "any") return value;
-	return roundSliderNumber(min + Math.ceil((value - min) / step - 1e-10) * step);
-}
-function getStepValueAtOrBelow(value, min, step) {
-	if (step === "any") return value;
-	return roundSliderNumber(min + Math.floor((value - min) / step + 1e-10) * step);
-}
-function isSliderStepAligned(min, max, step) {
-	const stepCount = (max - min) / step;
-	return Math.abs(stepCount - Math.round(stepCount)) <= 1e-10;
-}
-function normalizeRangeSliderMinRange(minRange, min, max) {
-	const bounds = normalizeSliderBounds(min, max);
-	const domain = bounds.max - bounds.min;
-	return Math.min(domain, Number.isFinite(minRange) && minRange > 0 ? minRange : 0);
-}
-function normalizeRangeSliderValue(value, min, max, step, minRange = 0) {
-	const bounds = normalizeSliderBounds(min, max);
-	const safeStep = normalizeSliderStep(step);
-	const safeMinRange = normalizeRangeSliderMinRange(minRange, bounds.min, bounds.max);
-	const first = normalizeSliderValue(Array.isArray(value) ? Number(value[0]) : NaN, bounds.min, bounds.max, safeStep);
-	const second = normalizeSliderValue(Array.isArray(value) ? Number(value[1]) : NaN, bounds.min, bounds.max, safeStep);
-	const lower = Math.min(first, second);
-	const upper = Math.max(first, second);
-	if (upper - lower >= safeMinRange) return [lower, upper];
-	if (safeMinRange >= bounds.max - bounds.min) return [bounds.min, bounds.max];
-	const expandedUpper = getStepValueAtOrAbove(lower + safeMinRange, bounds.min, safeStep);
-	if (expandedUpper <= bounds.max) return [lower, expandedUpper];
-	const expandedLower = getStepValueAtOrBelow(bounds.max - safeMinRange, bounds.min, safeStep);
-	return [Math.max(bounds.min, expandedLower), bounds.max];
-}
-function getClosestRangeSliderThumb(value, range, activeThumb) {
-	const [lower, upper] = range;
-	if (value < lower) return "lower";
-	if (value > upper) return "upper";
-	const lowerDistance = Math.abs(value - lower);
-	const upperDistance = Math.abs(value - upper);
-	if (lowerDistance < upperDistance) return "lower";
-	if (upperDistance < lowerDistance) return "upper";
-	return activeThumb ?? "upper";
+//#region src/components/slider/useRangeSliderValueState.ts
+function useRangeSliderValueState(props, onChange, setActiveThumb) {
+	const lowerInputRef = ref(null);
+	const upperInputRef = ref(null);
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? [props.min, props.max],
+		onChange
+	});
+	const control = useControlState(props);
+	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
+	const valueStep = computed(() => normalizeSliderStep(props.step));
+	const nativeStep = computed(() => getRangeSliderNativeStep(bounds.value, valueStep.value));
+	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(controllable.value.value, bounds.value.min, bounds.value.max, valueStep.value, normalizedMinRange.value));
+	const nativeLimits = computed(() => getRangeSliderNativeLimits(normalizedValue.value, bounds.value, valueStep.value, normalizedMinRange.value));
+	const nativeMin = computed(() => nativeLimits.value.min);
+	const nativeMax = computed(() => nativeLimits.value.max);
+	const valuePercent = computed(() => [getValuePercent(normalizedValue.value[0], bounds.value.min, bounds.value.max), getValuePercent(normalizedValue.value[1], bounds.value.min, bounds.value.max)]);
+	const formattedValue = computed(() => getFormattedRangeSliderValue(normalizedValue.value, props.formatValue));
+	const ariaLabels = computed(() => props.ariaLabel ?? ["Minimum", "Maximum"]);
+	const ariaValueText = computed(() => getRangeSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
+	const nativeNames = computed(() => Array.isArray(props.name) ? props.name : [props.name, props.name]);
+	const nativeIds = computed(() => [control.id, control.id ? `${control.id}-upper` : void 0]);
+	const validationMessages = computed(() => Array.isArray(props.validationMessage) ? props.validationMessage : [props.validationMessage, props.validationMessage]);
+	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (value) => value >= normalizedValue.value[0] && value <= normalizedValue.value[1], {
+		position: "--_rp-range-slider-mark-position",
+		decorativeColors: ["--_rp-range-slider-mark-color", "--_rp-range-slider-mark-ring-color"],
+		foregroundColors: ["--_rp-range-slider-mark-label-color", "--_rp-range-slider-mark-filled-label-color"]
+	}));
+	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
+	const trackSlotProps = computed(() => ({
+		value: normalizedValue.value,
+		formattedValue: formattedValue.value,
+		percent: valuePercent.value,
+		min: bounds.value.min,
+		max: bounds.value.max,
+		orientation: props.orientation,
+		getPercent(value) {
+			return getValuePercent(value, bounds.value.min, bounds.value.max);
+		}
+	}));
+	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]);
+			}
+		}
+	});
+	function updateThumb(thumb, value, anchorValue) {
+		if (control.disabled) return thumb;
+		const update = getRangeSliderThumbUpdate({
+			thumb,
+			value,
+			currentValue: normalizedValue.value,
+			bounds: bounds.value,
+			step: valueStep.value,
+			minRange: normalizedMinRange.value,
+			nativeMin: nativeMin.value,
+			nativeMax: nativeMax.value,
+			anchorValue
+		});
+		setActiveThumb(update.thumb);
+		controllable.setValue(update.value);
+		return update.thumb;
+	}
+	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);
+	}
+	return {
+		nativeElements,
+		setInputRef,
+		focus,
+		control,
+		bounds,
+		valueStep,
+		hasManualNativeKeyboard,
+		nativeMin,
+		nativeMax,
+		nativeStep,
+		nativeNames,
+		nativeIds,
+		normalizedValue,
+		valuePercent,
+		formattedValue,
+		ariaLabels,
+		ariaValueText,
+		markItems,
+		hasMarkLabels,
+		trackSlotProps,
+		updateThumb
+	};
 }
+//#endregion
+//#region src/components/slider/useRangeSlider.ts
 function getRangeSliderTrackStyle(props, valuePercent) {
 	const [lowerPercent, upperPercent] = valuePercent;
 	const style = {
@@ -1348,19 +1592,6 @@ function getRangeSliderTrackStyle(props, valuePercent) {
 	});
 	return style;
 }
-function getFormattedRangeSliderValue(value, formatter) {
-	return [getFormattedSliderValue(value[0], formatter), getFormattedSliderValue(value[1], formatter)];
-}
-function getRangeSliderAriaValueText(value, ariaValueText, formatter) {
-	const endpointValues = Array.isArray(ariaValueText) ? ariaValueText : [ariaValueText, ariaValueText];
-	return [getSliderAriaValueText(value[0], endpointValues[0], formatter), getSliderAriaValueText(value[1], endpointValues[1], formatter)];
-}
-function getThumbIndex(thumb) {
-	return thumb === "lower" ? 0 : 1;
-}
-function getOppositeThumb(thumb) {
-	return thumb === "lower" ? "upper" : "lower";
-}
 function getThumbFromTarget(target) {
 	const thumb = target?.closest?.("[data-range-slider-thumb]")?.getAttribute("data-range-slider-thumb");
 	return thumb === "lower" || thumb === "upper" ? thumb : void 0;
@@ -1371,58 +1602,30 @@ function getThumbInput(track, thumb) {
 function focusThumb(track, thumb) {
 	getThumbInput(track, thumb)?.focus({ preventScroll: true });
 }
-function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ?? [props.min, props.max]) {
-	const control = useControlState(props);
+function readRangeSliderPointerGeometry(track, orientation) {
+	const vertical = orientation === "vertical";
+	const thumbsRect = track.querySelector(".rp-range-slider__thumbs")?.getBoundingClientRect();
+	const rect = thumbsRect && (vertical ? thumbsRect.height > 0 : thumbsRect.width > 0) ? thumbsRect : track.getBoundingClientRect();
+	const length = vertical ? rect.height : rect.width;
+	if (length <= 0) return void 0;
+	return {
+		length,
+		start: vertical ? rect.bottom : rect.left,
+		vertical
+	};
+}
+function useRangeSlider(props, onChange) {
 	const activeThumb = ref();
-	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
-	const valueStep = computed(() => normalizeSliderStep(props.step));
-	const nativeStep = computed(() => {
-		const step = valueStep.value;
-		if (step === "any") return step;
-		return isSliderStepAligned(bounds.value.min, bounds.value.max, step) ? step : "any";
-	});
-	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(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"]);
-	const ariaValueText = computed(() => getRangeSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
-	const nativeNames = computed(() => Array.isArray(props.name) ? props.name : [props.name, props.name]);
-	const nativeIds = computed(() => [control.id, control.id ? `${control.id}-upper` : void 0]);
-	const nativeMin = computed(() => {
-		if (normalizedMinRange.value === 0) return [bounds.value.min, bounds.value.min];
-		return [bounds.value.min, clamp(getStepValueAtOrAbove(normalizedValue.value[0] + normalizedMinRange.value, bounds.value.min, valueStep.value), bounds.value.min, bounds.value.max)];
+	const valueState = useRangeSliderValueState(props, onChange, (thumb) => {
+		activeThumb.value = thumb;
 	});
-	const nativeMax = computed(() => {
-		if (normalizedMinRange.value === 0) return [bounds.value.max, bounds.value.max];
-		return [clamp(getStepValueAtOrBelow(normalizedValue.value[1] - normalizedMinRange.value, bounds.value.min, valueStep.value), bounds.value.min, bounds.value.max), bounds.value.max];
-	});
-	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (value) => value >= normalizedValue.value[0] && value <= normalizedValue.value[1], {
-		position: "--_rp-range-slider-mark-position",
-		decorativeColors: ["--_rp-range-slider-mark-color", "--_rp-range-slider-mark-ring-color"],
-		foregroundColors: ["--_rp-range-slider-mark-label-color", "--_rp-range-slider-mark-filled-label-color"]
-	}));
-	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
-	const trackSlotProps = computed(() => ({
-		value: normalizedValue.value,
-		formattedValue: formattedValue.value,
-		percent: valuePercent.value,
-		min: bounds.value.min,
-		max: bounds.value.max,
-		orientation: props.orientation,
-		getPercent(value) {
-			return getSliderValuePercent(value, bounds.value.min, bounds.value.max);
-		}
-	}));
-	const trackStyle = computed(() => getRangeSliderTrackStyle(props, valuePercent.value));
 	const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));
 	const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));
 	const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);
 	const tooltipState = useRangeSliderTooltipState({
 		mode: tooltipMode,
 		openDelay: tooltipOpenDelay,
-		disabled: () => control.disabled,
+		disabled: () => valueState.control.disabled,
 		setActiveThumb: (thumb) => {
 			activeThumb.value = thumb;
 		}
@@ -1444,7 +1647,7 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 	const tooltipContrastColor = computed(() => tooltipOptions.value.contrastColor);
 	const tooltipOffset = computed(() => tooltipOptions.value.offset);
 	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
-	const tooltipContent = computed(() => [String(formattedValue.value[0]), String(formattedValue.value[1])]);
+	const tooltipContent = computed(() => [String(valueState.formattedValue.value[0]), String(valueState.formattedValue.value[1])]);
 	const mergedTooltipContent = computed(() => {
 		const [lower, upper] = tooltipContent.value;
 		return lower === upper ? lower : `${lower}–${upper}`;
@@ -1452,46 +1655,13 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 	const rootClass = computed(() => bem("rp-range-slider", {
 		[`size-${props.size}`]: Boolean(props.size),
 		vertical: props.orientation === "vertical",
-		marked: markItems.value.length > 0,
-		"marks-with-labels": hasMarkLabels.value,
+		marked: valueState.markItems.value.length > 0,
+		"marks-with-labels": valueState.hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled,
-		invalid: control.invalid
+		disabled: valueState.control.disabled,
+		invalid: valueState.control.invalid
 	}));
-	function getThumbUpdate(thumb, value, anchorValue = normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))]) {
-		const safeValue = normalizeSliderValue(value, bounds.value.min, bounds.value.max, valueStep.value);
-		if (normalizedMinRange.value > 0) {
-			const nextValue = [...normalizedValue.value];
-			nextValue[getThumbIndex(thumb)] = thumb === "lower" ? Math.min(safeValue, nativeMax.value[0]) : Math.max(safeValue, nativeMin.value[1]);
-			return {
-				thumb,
-				value: nextValue
-			};
-		}
-		if (safeValue < anchorValue) return {
-			thumb: "lower",
-			value: [safeValue, anchorValue]
-		};
-		if (safeValue > anchorValue) return {
-			thumb: "upper",
-			value: [anchorValue, safeValue]
-		};
-		return {
-			thumb,
-			value: [safeValue, safeValue]
-		};
-	}
-	function updateThumb(thumb, value, anchorValue) {
-		if (control.disabled) return thumb;
-		const update = getThumbUpdate(thumb, value, anchorValue);
-		activeThumb.value = update.thumb;
-		emitUpdate(update.value);
-		return update.thumb;
-	}
-	function onInput(thumb, event) {
-		const input = event.target;
-		transferFocusedThumb(input, thumb, updateThumb(thumb, input.valueAsNumber));
-	}
+	const trackStyle = computed(() => getRangeSliderTrackStyle(props, valueState.valuePercent.value));
 	function transferFocusedThumb(input, thumb, nextThumb) {
 		if (thumb === nextThumb || input.ownerDocument.activeElement !== input) return;
 		const track = input.closest(".rp-range-slider__track");
@@ -1501,68 +1671,31 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 		tooltipState.transferInteraction(thumb, nextThumb, "focus");
 		nextInput.focus({ preventScroll: true });
 	}
+	function onInput(thumb, event) {
+		const input = event.target;
+		transferFocusedThumb(input, thumb, valueState.updateThumb(thumb, input.valueAsNumber));
+	}
 	function onTooltipKeydown(thumb, event) {
 		if (tooltipState.onKeydown(thumb, event)) return;
-		if (!hasManualNativeKeyboard.value || valueStep.value === "any") return;
-		const index = getThumbIndex(thumb);
-		const currentValue = normalizedValue.value[index];
-		const pageStep = valueStep.value * 10;
-		let nextValue;
-		switch (event.key) {
-			case "ArrowRight":
-			case "ArrowUp":
-				nextValue = currentValue + valueStep.value;
-				break;
-			case "ArrowLeft":
-			case "ArrowDown":
-				nextValue = currentValue - valueStep.value;
-				break;
-			case "PageUp":
-				nextValue = currentValue + pageStep;
-				break;
-			case "PageDown":
-				nextValue = currentValue - pageStep;
-				break;
-			case "Home":
-				nextValue = nativeMin.value[index];
-				break;
-			case "End":
-				nextValue = nativeMax.value[index];
-				break;
-		}
+		if (!valueState.hasManualNativeKeyboard.value || valueState.valueStep.value === "any") return;
+		const index = getRangeSliderThumbIndex(thumb);
+		const nextValue = getRangeSliderKeyboardValue(event.key, valueState.normalizedValue.value[index], valueState.valueStep.value, valueState.nativeMin.value[index], valueState.nativeMax.value[index]);
 		if (nextValue == null) return;
 		event.preventDefault();
-		const nextThumb = updateThumb(thumb, nextValue);
+		const nextThumb = valueState.updateThumb(thumb, nextValue);
 		transferFocusedThumb(event.target, thumb, nextThumb);
 	}
-	function getPointerGeometry(track) {
-		const vertical = props.orientation === "vertical";
-		const thumbsRect = track.querySelector(".rp-range-slider__thumbs")?.getBoundingClientRect();
-		const rect = thumbsRect && (vertical ? thumbsRect.height > 0 : thumbsRect.width > 0) ? thumbsRect : track.getBoundingClientRect();
-		const length = vertical ? rect.height : rect.width;
-		if (length <= 0) return void 0;
-		return {
-			length,
-			start: vertical ? rect.bottom : rect.left,
-			vertical
-		};
-	}
-	function getValueFromPointer(event, geometry) {
-		const pointerPosition = geometry.vertical ? event.clientY : event.clientX;
-		const ratio = clamp((geometry.vertical ? geometry.start - pointerPosition : pointerPosition - geometry.start) / geometry.length, 0, 1);
-		return bounds.value.min + ratio * (bounds.value.max - bounds.value.min);
-	}
 	const { onTrackPointerDown } = useRangeSliderPointer({
-		disabled: () => control.disabled,
-		getPointerGeometry,
-		getPointerValue: getValueFromPointer,
-		getThumb: (event, value) => getThumbFromTarget(event.target) ?? getClosestRangeSliderThumb(value, normalizedValue.value, activeThumb.value),
-		getAnchorValue: (thumb) => normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))],
+		disabled: () => valueState.control.disabled,
+		getPointerGeometry: (track) => readRangeSliderPointerGeometry(track, props.orientation),
+		getPointerValue: (event, geometry) => getRangeSliderPointerValue(event, geometry, valueState.bounds.value),
+		getThumb: (event, value) => getThumbFromTarget(event.target) ?? getClosestRangeSliderThumb(value, valueState.normalizedValue.value, activeThumb.value),
+		getAnchorValue: (thumb) => valueState.normalizedValue.value[getRangeSliderThumbIndex(getOppositeRangeSliderThumb(thumb))],
 		setActiveThumb: (thumb) => {
 			activeThumb.value = thumb;
 		},
 		focusThumb,
-		updateThumb,
+		updateThumb: valueState.updateThumb,
 		transferFocusedThumb: (track, from, to) => {
 			const input = getThumbInput(track, from);
 			if (input) transferFocusedThumb(input, from, to);
@@ -1572,20 +1705,23 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 		transferDrag: (from, to) => tooltipState.transferInteraction(from, to, "drag")
 	});
 	return {
-		control,
-		nativeMin,
-		nativeMax,
-		nativeStep,
-		nativeNames,
-		nativeIds,
+		nativeElements: valueState.nativeElements,
+		setInputRef: valueState.setInputRef,
+		focus: valueState.focus,
+		control: valueState.control,
+		nativeMin: valueState.nativeMin,
+		nativeMax: valueState.nativeMax,
+		nativeStep: valueState.nativeStep,
+		nativeNames: valueState.nativeNames,
+		nativeIds: valueState.nativeIds,
 		rootClass,
-		normalizedValue,
-		valuePercent,
-		formattedValue,
-		ariaLabels,
-		ariaValueText,
-		markItems,
-		trackSlotProps,
+		normalizedValue: valueState.normalizedValue,
+		valuePercent: valueState.valuePercent,
+		formattedValue: valueState.formattedValue,
+		ariaLabels: valueState.ariaLabels,
+		ariaValueText: valueState.ariaValueText,
+		markItems: valueState.markItems,
+		trackSlotProps: valueState.trackSlotProps,
 		trackStyle,
 		activeThumb,
 		tooltipVisible,
@@ -1612,17 +1748,16 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 }
 //#endregion
 //#region src/components/slider/range-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-ec20f482>");
-var t1 = template("<span data-v-ec20f482 class=rp-range-slider__header>");
-var t2 = template("<span data-v-ec20f482 class=\"rp-range-slider__track-layer rp-range-slider__track-underlay\"aria-hidden=true>");
-var t3 = template("<span data-v-ec20f482 class=\"rp-range-slider__track-layer rp-range-slider__track-overlay\"aria-hidden=true>");
-var t4 = template("<input data-v-ec20f482>");
-var t5 = template("<span data-v-ec20f482> ");
-var t6 = template("<span data-v-ec20f482><span data-v-ec20f482 class=rp-range-slider__mark-dot></span>");
-var t7 = template("<span data-v-ec20f482 class=rp-range-slider__marks aria-hidden=true>");
-var t8 = template("<span data-v-ec20f482><span data-v-ec20f482 class=rp-range-slider__thumb-content>");
-var t9 = template("<div data-v-ec20f482><span data-v-ec20f482><span data-v-ec20f482 class=rp-range-slider__rail aria-hidden=true></span><!><span data-v-ec20f482></span><!><span data-v-ec20f482 class=rp-range-slider__thumbs aria-hidden=true>", 1);
-delegateEvents("pointerdown");
+var t0 = template("<span data-v-e27ae1af>");
+var t1 = template("<span data-v-e27ae1af class=rp-range-slider__header>");
+var t2 = template("<span data-v-e27ae1af class=\"rp-range-slider__track-layer rp-range-slider__track-underlay\"aria-hidden=true>");
+var t3 = template("<span data-v-e27ae1af class=\"rp-range-slider__track-layer rp-range-slider__track-overlay\"aria-hidden=true>");
+var t4 = template("<input data-v-e27ae1af>");
+var t5 = template("<span data-v-e27ae1af> ");
+var t6 = template("<span data-v-e27ae1af><span data-v-e27ae1af class=rp-range-slider__mark-dot></span>");
+var t7 = template("<span data-v-e27ae1af class=rp-range-slider__marks aria-hidden=true>");
+var t8 = template("<span data-v-e27ae1af><span data-v-e27ae1af class=rp-range-slider__thumb-content>");
+var t9 = template("<div data-v-e27ae1af><span data-v-e27ae1af><span data-v-e27ae1af class=rp-range-slider__rail aria-hidden=true></span><!><span data-v-e27ae1af></span><!><span data-v-e27ae1af class=rp-range-slider__thumbs aria-hidden=true>", 1);
 //#endregion
 //#region src/components/slider/range-slider.vue
 var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -1682,47 +1817,8 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		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 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, trackSlotProps, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, 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 { nativeElements, setInputRef, focus, control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackSlotProps, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => emit("update:modelValue", value));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: [rootClass.value, {
@@ -1732,8 +1828,8 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			style: trackStyle.value,
 			role: "group",
 			"data-active-thumb": activeThumb.value || void 0,
-			"data-disabled": presence(control.disabled),
-			"data-invalid": presence(control.invalid),
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
 			"data-orientation": props.orientation,
 			"aria-labelledby": groupLabelledby.value,
 			"aria-describedby": control.ariaDescribedby,
@@ -1745,44 +1841,21 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			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, {
+			const inputAttrs = inputAttrsByThumb.value[index] ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(inputAttrs);
+			return Object.assign({}, forwardedAttributes, {
 				...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);
-				}
+				onInput: composeEventHandlers((event) => onInput(thumb, event), inputAttrs.onInput),
+				onFocus: composeEventHandlers(() => onTooltipFocus(thumb), inputAttrs.onFocus),
+				onBlur: composeEventHandlers(() => onTooltipBlur(thumb), inputAttrs.onBlur),
+				onKeydown: composeEventHandlers((event) => onTooltipKeydown(thumb, event), inputAttrs.onKeydown)
 			});
 		}));
-		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 groupLabelledby = computed(() => mergeAriaIdRefs(control.ariaLabelledby, slots.default ? labelId.value : void 0));
 		__expose({
 			nativeElements,
 			focus
@@ -1865,10 +1938,10 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					"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)
+					"data-disabled": unref(toPresenceAttribute)(_control.disabled),
+					"data-invalid": unref(toPresenceAttribute)(_control.invalid)
 				}]);
-				_setTemplateRef(n22, (element) => setInputRef(_index, element), true);
+				_setTemplateRef(n22, (element) => unref(setInputRef)(_index, element), true);
 			});
 			return n22;
 		}, (thumb, index) => thumb, 8);
@@ -1883,7 +1956,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					setDynamicProps(n30, [unref(getPartAttrs)("mark", {
 						class: ["rp-range-slider__mark", { "rp-range-slider__mark--filled": _mark.filled }],
 						style: _mark.style
-					}), { "data-filled": unref(presence)(_mark.filled) }]);
+					}), { "data-filled": unref(toPresenceAttribute)(_mark.filled) }]);
 				});
 				setInsertionState(n30, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
@@ -1942,12 +2015,12 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"onUpdate:overlapping": () => _on_update_overlapping
 			});
 		});
-		n42.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
+		on(n42, "pointerdown", (e) => unref(onTrackPointerDown)(e));
 		on(n42, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
 		on(n42, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
 		return n44;
 	}
-}), [["__scopeId", "data-v-ec20f482"]]);
+}), [["__scopeId", "data-v-e27ae1af"]]);
 //#endregion
 //#region src/components/slider/types.ts
 var sliderParts = [