ropav 0.1.1 → 0.1.2

package/dist/slider.js

@@ -6,7 +6,7 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 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, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
+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
 function normalizeSliderBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
@@ -33,7 +33,7 @@ function normalizeSliderValue(value, min, max, step) {
 	return Math.min(bounds.max, Math.max(bounds.min, Number(snapped.toFixed(10))));
 }
 function getSliderValuePercent(value, min, max) {
-	if (max <= min) return 0;
+	if (!Number.isFinite(value) || max <= min) return 0;
 	const percent = (value - min) / (max - min) * 100;
 	return Math.min(100, Math.max(0, percent));
 }
@@ -50,10 +50,18 @@ function getSliderBorderValue(value, borderColorProperty) {
 	if (typeof value === "number") return Number.isFinite(value) ? `${value}px solid var(${borderColorProperty})` : void 0;
 	return value;
 }
-function applySliderThumbStyle(style, thumbStyle, properties) {
-	setSliderStyleValue(style, properties.size, getSliderLengthValue(thumbStyle?.size));
-	setSliderStyleValue(style, properties.border, getSliderBorderValue(thumbStyle?.border, properties.borderColor));
-	setSliderStyleValue(style, properties.padding, getSliderLengthValue(thumbStyle?.padding));
+function applySliderThumbStyle(style, thumb, properties) {
+	setSliderStyleValue(style, properties.size, getSliderLengthValue(thumb?.size));
+	setSliderStyleValue(style, properties.border, getSliderBorderValue(thumb?.border, properties.borderColor));
+	setSliderStyleValue(style, properties.padding, getSliderLengthValue(thumb?.padding));
+}
+function getSliderThumbOptions(thumb) {
+	return typeof thumb === "object" ? thumb : {};
+}
+function getSliderThumbMode(thumb) {
+	if (thumb === false) return false;
+	if (typeof thumb === "object") return thumb.visibility ?? "always";
+	return thumb;
 }
 function getSliderMarkStyle(percent, color, properties) {
 	const style = { [properties.position]: `${percent}%` };
@@ -91,21 +99,29 @@ function getSliderTooltipOptions(tooltip) {
 }
 function getSliderTooltipMode(tooltip) {
 	if (tooltip === false) return false;
-	if (typeof tooltip === "object") return tooltip.mode ?? "hover";
+	if (typeof tooltip === "object") {
+		if ("anchor" in tooltip && tooltip.anchor === "pointer") return "hover";
+		return tooltip.mode ?? "hover";
+	}
 	return tooltip;
 }
+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) {
+function getSliderTrackStyle(props, valuePercent, tooltipPercent) {
 	const style = {
 		"--_rp-slider-percent": `${valuePercent}%`,
-		"--_rp-slider-ratio": `${valuePercent / 100}`
+		"--_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, props.thumbStyle, {
+	applySliderThumbStyle(style, getSliderThumbOptions(props.thumb), {
 		size: "--rp-slider-thumb-size",
 		border: "--_rp-slider-thumb-border-style",
 		padding: "--rp-slider-thumb-padding",
@@ -131,6 +147,7 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		]
 	}));
 	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({
@@ -140,10 +157,28 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 	const trackHovered = ref(false);
 	const focusWithin = ref(false);
 	const dragging = ref(false);
+	const previewAvailable = ref(false);
+	const previewValue = ref(normalizedValue.value);
 	let dismissed = false;
 	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);
@@ -152,23 +187,29 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 	const tooltipColor = computed(() => tooltipOptions.value.color);
 	const tooltipOffset = computed(() => tooltipOptions.value.offset);
 	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
-	const tooltipContent = computed(() => String(formattedValue.value));
+	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));
+	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() {
@@ -178,13 +219,21 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		}
 		closeDelayedTooltip();
 	}
-	function onTooltipMouseEnter() {
+	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 onTooltipMouseLeave() {
+	function onTooltipTrackLeave() {
 		trackHovered.value = false;
+		if (!dragging.value && tooltipAnchor.value === "pointer") cancelScheduledPreview();
 		syncTooltip();
 	}
 	function onTooltipFocusIn() {
@@ -197,13 +246,73 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		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 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);
+		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();
+	}
+	function schedulePreview(event, track) {
+		if (tooltipAnchor.value !== "pointer" || control.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);
+	}
+	function onTooltipPointerMove(event) {
+		if (dragPointerId !== void 0 && dragging.value && event.pointerId !== dragPointerId) return;
+		const track = event.currentTarget;
+		if (track) schedulePreview(event, track);
+	}
+	function onTooltipWindowPointerMove(event) {
+		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
+		if (dragTrack) schedulePreview(event, dragTrack);
 	}
 	function onTooltipPointerEnd(event) {
 		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
+		cancelScheduledPreview();
+		if (dragTrack) updatePreviewFromPointer(event, dragTrack);
 		dragging.value = false;
 		removeDragListeners();
 		syncTooltip();
@@ -214,7 +323,10 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		dismissed = false;
 		dragging.value = true;
 		dragPointerId = Number.isFinite(event.pointerId) ? event.pointerId : void 0;
-		dragView = event.currentTarget?.ownerDocument.defaultView ?? null;
+		dragTrack = event.currentTarget;
+		if (dragTrack) updatePreviewFromPointer(event, dragTrack);
+		dragView = dragTrack?.ownerDocument.defaultView ?? null;
+		dragView?.addEventListener("pointermove", onTooltipWindowPointerMove);
 		dragView?.addEventListener("pointerup", onTooltipPointerEnd);
 		dragView?.addEventListener("pointercancel", onTooltipPointerEnd);
 		syncTooltip();
@@ -225,7 +337,10 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 			closeDelayedTooltip();
 		}
 	}
-	onBeforeUnmount(removeDragListeners);
+	onBeforeUnmount(() => {
+		removeDragListeners();
+		cancelScheduledPreview();
+	});
 	return {
 		control,
 		nativeMin: computed(() => bounds.value.min),
@@ -237,20 +352,29 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		formattedValue,
 		ariaValueText,
 		markItems,
+		thumbMode,
+		trackSlotProps,
 		trackStyle,
+		trackHovered,
+		dragging,
 		tooltipVisible,
 		tooltipOpen,
+		tooltipAnchor,
 		tooltipPlacement,
 		tooltipId,
 		tooltipColor,
 		tooltipOffset,
 		tooltipOpenDelay,
 		tooltipArrow,
+		tooltipValue,
+		tooltipPercent,
+		tooltipFormattedValue,
 		tooltipContent,
 		onInput,
 		onTooltipPointerDown,
-		onTooltipMouseEnter,
-		onTooltipMouseLeave,
+		onTooltipPointerMove,
+		onTooltipTrackEnter,
+		onTooltipTrackLeave,
 		onTooltipFocusIn,
 		onTooltipFocusOut,
 		onTooltipKeydown
@@ -258,15 +382,18 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-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");
+var t0$2 = template("<span data-v-3864baf4>");
+var t1$2 = template("<span data-v-3864baf4 class=rp-slider__header>");
+var t2$2 = template("<span data-v-3864baf4 class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
+var t3$2 = template("<span data-v-3864baf4 class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
+var t4$2 = template("<span data-v-3864baf4 class=rp-slider__travel aria-hidden=true>", 2);
+var t5$1 = template("<span data-v-3864baf4> ");
+var t6$1 = template("<span data-v-3864baf4><span data-v-3864baf4 class=rp-slider__mark-dot></span>");
+var t7$1 = template("<span data-v-3864baf4 class=rp-slider__marks aria-hidden=true>");
+var t8$1 = template("<span data-v-3864baf4 class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
+var t9$1 = template(" ");
+var t10 = template("<label data-v-3864baf4><span data-v-3864baf4><span data-v-3864baf4 class=rp-slider__rail aria-hidden=true></span><!><span data-v-3864baf4></span><!><input data-v-3864baf4><!><span data-v-3864baf4><span data-v-3864baf4 class=rp-slider__thumb-content>", 1);
+delegateEvents("pointerdown", "pointermove", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -283,7 +410,14 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		max: { default: 100 },
 		step: { default: 1 },
 		marks: { default: () => [] },
-		thumbStyle: {},
+		thumb: {
+			type: [
+				Boolean,
+				String,
+				Object
+			],
+			default: "always"
+		},
 		tooltip: {
 			type: [
 				Boolean,
@@ -319,16 +453,16 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
+		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
 		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 { 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);
+		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, 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,
@@ -349,7 +483,10 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			style: trackStyle.value,
 			"data-disabled": presence(control.disabled),
 			"data-invalid": presence(control.invalid),
-			"data-orientation": props.orientation
+			"data-orientation": props.orientation,
+			"data-track-hovered": presence(trackHovered.value),
+			"data-dragging": presence(dragging.value),
+			"data-thumb-visibility": thumbMode.value === false ? "hidden" : thumbMode.value
 		}));
 		const tooltipClassNames = computed(() => ({
 			root: ["rp-slider__tooltip", props.classNames?.tooltip],
@@ -379,12 +516,17 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			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);
+		const n48 = t10();
+		const n45 = child(n48, 1);
+		const n44 = next(child(n45), 1);
+		const n15 = next(n44, 2);
+		const n46 = next(n15, 3);
+		const n23 = next(n46, 5);
+		const n47 = next(n23, 6);
+		const n35 = next(n47, 7);
+		const n34 = child(n35);
+		renderEffect(() => setDynamicProps(n48, [rootAttrs.value]));
+		setInsertionState(n48, 0);
 		createIf(() => $slots.default || $slots.value, () => {
 			const n10 = t1$2();
 			setInsertionState(n10, null, 0);
@@ -409,16 +551,33 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			});
 			return n10;
 		});
-		_setTemplateRef(n12, inputRef, null, "inputRef");
+		renderEffect(() => setDynamicProps(n45, [unref(getPartAttrs)("track", { class: "rp-slider__track" })]));
+		setInsertionState(n45, n44, 1);
+		createIf(() => $slots["track-underlay"], () => {
+			const n14 = t2$2();
+			setInsertionState(n14, null, 0);
+			createSlot("track-underlay", { $: [() => unref(trackSlotProps)] }, null, 1);
+			return n14;
+		});
+		renderEffect(() => setDynamicProps(n15, [unref(getPartAttrs)("range", { class: "rp-slider__bar" }), { "aria-hidden": "true" }]));
+		setInsertionState(n45, n46, 3);
+		createIf(() => $slots["track-overlay"], () => {
+			const n19 = t3$2();
+			setInsertionState(n19, null, 0);
+			createSlot("track-overlay", { $: [() => unref(trackSlotProps)] }, null, 1);
+			return n19;
+		});
+		setInsertionState(n45, n46, 4);
+		createIf(() => unref(tooltipAnchor) === "pointer", () => {
+			return t4$2();
+		}, null, 33);
+		_setTemplateRef(n23, inputRef, null, "inputRef");
 		renderEffect(() => {
-			const _getPartAttrs = unref(getPartAttrs);
 			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
 			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, {
+			setDynamicProps(n23, [_nativeInputAttrs, {
 				id: _control.id,
 				name: __props.name,
 				form: _control.form ?? _nativeInputAttrs.form,
@@ -441,47 +600,41 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-invalid": unref(presence)(_control.invalid)
 			}]);
 		});
-		setInsertionState(n31, null, 2);
+		setInsertionState(n45, n47, 6);
 		createIf(() => unref(markItems).length, () => {
-			const n21 = t4$2();
-			setInsertionState(n21, null, 0);
+			const n32 = t7$1();
+			setInsertionState(n32, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n20 = t3$2();
+				const n31 = t6$1();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setDynamicProps(n20, [unref(getPartAttrs)("mark", {
+					setDynamicProps(n31, [unref(getPartAttrs)("mark", {
 						class: ["rp-slider__mark", { "rp-slider__mark--filled": _mark.filled }],
 						style: _mark.style
 					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n20, null, 1);
+				setInsertionState(n31, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n19 = t2$2();
-					const x19 = txt(n19);
+					const n30 = t5$1();
+					const x30 = txt(n30);
 					renderEffect(() => {
-						setDynamicProps(n19, [unref(getPartAttrs)("markLabel", { class: "rp-slider__mark-label" })]);
-						setText(x19, toDisplayString(_for_item0.value.label));
+						setDynamicProps(n30, [unref(getPartAttrs)("markLabel", { class: "rp-slider__mark-label" })]);
+						setText(x30, toDisplayString(_for_item0.value.label));
 					});
-					return n19;
+					return n30;
 				});
-				return n20;
+				return n31;
 			}, (mark) => mark.key, 9);
-			return n21;
+			return n32;
 		});
-		setInsertionState(n31, null, 3);
-		createIf(() => $slots.thumb, () => {
-			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 n26;
-		});
-		setInsertionState(n31, null, 4);
+		renderEffect(() => setDynamicProps(n35, [unref(getPartAttrs)("thumb", { class: "rp-slider__thumb" }), { "aria-hidden": "true" }]));
+		setInsertionState(n34, null, 0);
+		createSlot("thumb", {
+			value: () => unref(normalizedValue),
+			formattedValue: () => unref(formattedValue),
+			percent: () => unref(valuePercent)
+		}, null, 1);
+		setInsertionState(n45, null, 8);
 		createIf(() => unref(tooltipVisible), () => {
 			return createComponent(tooltip_default, {
 				id: () => unref(tooltipId),
@@ -495,19 +648,34 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"open-delay": () => unref(tooltipOpenDelay),
 				arrow: () => unref(tooltipArrow),
 				decorative: ""
-			}, () => {
-				return t6$1();
+			}, {
+				"content": extend(() => {
+					return createSlot("tooltip-content", {
+						value: () => unref(tooltipValue),
+						formattedValue: () => unref(tooltipFormattedValue),
+						percent: () => unref(tooltipPercent),
+						anchor: () => unref(tooltipAnchor)
+					}, () => {
+						const n41 = t9$1();
+						renderEffect(() => setText(n41, toDisplayString(unref(tooltipContent))));
+						return n41;
+					}, 1);
+				}, { _: 8 }),
+				"default": () => {
+					return t8$1();
+				}
 			});
 		});
-		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;
+		n45.$evtpointerdown = createInvoker((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));
+		return n48;
 	}
-}), [["__scopeId", "data-v-a837ba72"]]);
+}), [["__scopeId", "data-v-3864baf4"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -1162,7 +1330,7 @@ function getRangeSliderTrackStyle(props, valuePercent) {
 		"--_rp-range-slider-tooltip-merged-percent": `${(lowerPercent + upperPercent) / 2}%`
 	};
 	setSliderStyleValue(style, "--_rp-range-slider-color", getComponentColorValue(props.color));
-	applySliderThumbStyle(style, props.thumbStyle, {
+	applySliderThumbStyle(style, props.thumb, {
 		size: "--rp-slider-thumb-size",
 		border: "--_rp-range-slider-thumb-border-style",
 		padding: "--rp-slider-thumb-padding",
@@ -1230,6 +1398,17 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 		]
 	}));
 	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));
@@ -1398,6 +1577,7 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 		ariaLabels,
 		ariaValueText,
 		markItems,
+		trackSlotProps,
 		trackStyle,
 		activeThumb,
 		tooltipVisible,
@@ -1422,14 +1602,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-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);
+var t0 = template("<span data-v-6bfae0e8>");
+var t1 = template("<span data-v-6bfae0e8 class=rp-range-slider__header>");
+var t2 = template("<span data-v-6bfae0e8 class=\"rp-range-slider__track-layer rp-range-slider__track-underlay\"aria-hidden=true>");
+var t3 = template("<span data-v-6bfae0e8 class=\"rp-range-slider__track-layer rp-range-slider__track-overlay\"aria-hidden=true>");
+var t4 = template("<input data-v-6bfae0e8>");
+var t5 = template("<span data-v-6bfae0e8> ");
+var t6 = template("<span data-v-6bfae0e8><span data-v-6bfae0e8 class=rp-range-slider__mark-dot></span>");
+var t7 = template("<span data-v-6bfae0e8 class=rp-range-slider__marks aria-hidden=true>");
+var t8 = template("<span data-v-6bfae0e8><span data-v-6bfae0e8 class=rp-range-slider__thumb-content>");
+var t9 = template("<div data-v-6bfae0e8><span data-v-6bfae0e8><span data-v-6bfae0e8 class=rp-range-slider__rail aria-hidden=true></span><!><span data-v-6bfae0e8></span><!><span data-v-6bfae0e8 class=rp-range-slider__thumbs aria-hidden=true>", 1);
 delegateEvents("pointerdown");
 //#endregion
 //#region src/components/slider/range-slider.vue
@@ -1441,6 +1623,15 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		minRange: { default: 0 },
+		thumb: {},
+		tooltip: {
+			type: [
+				Boolean,
+				String,
+				Object
+			],
+			default: "hover"
+		},
 		name: {},
 		ariaLabel: { default: () => ["Minimum", "Maximum"] },
 		ariaValueText: {},
@@ -1452,15 +1643,6 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		max: { default: 100 },
 		step: { default: 1 },
 		marks: { default: () => [] },
-		thumbStyle: {},
-		tooltip: {
-			type: [
-				Boolean,
-				String,
-				Object
-			],
-			default: "hover"
-		},
 		formatValue: {},
 		color: {},
 		size: {},
@@ -1484,9 +1666,9 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
+		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
-		const slots = useSlots();
 		const generatedId = useId();
 		const tooltipsOverlapping = ref(false);
 		const rangeSliderThumbs = ["lower", "upper"];
@@ -1498,7 +1680,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			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 { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackSlotProps, 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);
@@ -1596,13 +1778,14 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			focus
 		});
 		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);
+		const n44 = t9();
+		const n42 = child(n44, 1);
+		const n41 = next(child(n42), 1);
+		const n15 = next(n41, 2);
+		const n43 = next(n15, 3);
+		const n40 = next(n43, 6);
+		renderEffect(() => setDynamicProps(n44, [rootAttrs.value]));
+		setInsertionState(n44, 0);
 		createIf(() => $slots.default || $slots.value, () => {
 			const n10 = t1();
 			setInsertionState(n10, null, 0);
@@ -1627,14 +1810,25 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 			return n10;
 		});
-		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" }]);
+		renderEffect(() => setDynamicProps(n42, [unref(getPartAttrs)("track", { class: "rp-range-slider__track" })]));
+		setInsertionState(n42, n41, 1);
+		createIf(() => $slots["track-underlay"], () => {
+			const n14 = t2();
+			setInsertionState(n14, null, 0);
+			createSlot("track-underlay", { $: [() => unref(trackSlotProps)] }, null, 1);
+			return n14;
+		});
+		renderEffect(() => setDynamicProps(n15, [unref(getPartAttrs)("range", { class: "rp-range-slider__bar" }), { "aria-hidden": "true" }]));
+		setInsertionState(n42, n43, 3);
+		createIf(() => $slots["track-overlay"], () => {
+			const n19 = t3();
+			setInsertionState(n19, null, 0);
+			createSlot("track-overlay", { $: [() => unref(trackSlotProps)] }, null, 1);
+			return n19;
 		});
-		setInsertionState(n34, n33, 1);
+		setInsertionState(n42, n43, 4);
 		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
-			const n14 = t2();
+			const n22 = t4();
 			renderEffect(() => {
 				const _nativeInputAttrs = nativeInputAttrs.value;
 				const _index = _for_key0.value;
@@ -1642,7 +1836,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				const _props = props;
 				const _nativeInputAttrs_index = _nativeInputAttrs[_index];
 				const _props_required_nativeInputAttrs_index_required = _props.required ?? _nativeInputAttrs_index?.required;
-				setDynamicProps(n14, [_nativeInputAttrs_index, {
+				setDynamicProps(n22, [_nativeInputAttrs_index, {
 					id: unref(nativeIds)[_index],
 					name: unref(nativeNames)[_index],
 					form: _control.form ?? _nativeInputAttrs_index?.form,
@@ -1664,49 +1858,49 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					"data-disabled": unref(presence)(_control.disabled),
 					"data-invalid": unref(presence)(_control.invalid)
 				}]);
-				_setTemplateRef(n14, (element) => setInputRef(_index, element), true);
+				_setTemplateRef(n22, (element) => setInputRef(_index, element), true);
 			});
-			return n14;
+			return n22;
 		}, (thumb, index) => thumb, 8);
-		setInsertionState(n34, n33, 2);
+		setInsertionState(n42, n43, 5);
 		createIf(() => unref(markItems).length, () => {
-			const n23 = t5();
-			setInsertionState(n23, null, 0);
+			const n31 = t7();
+			setInsertionState(n31, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n22 = t4();
+				const n30 = t6();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setDynamicProps(n22, [unref(getPartAttrs)("mark", {
+					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) }]);
 				});
-				setInsertionState(n22, null, 1);
+				setInsertionState(n30, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n21 = t3();
-					const x21 = txt(n21);
+					const n29 = t5();
+					const x29 = txt(n29);
 					renderEffect(() => {
-						setDynamicProps(n21, [unref(getPartAttrs)("markLabel", { class: "rp-range-slider__mark-label" })]);
-						setText(x21, toDisplayString(_for_item0.value.label));
+						setDynamicProps(n29, [unref(getPartAttrs)("markLabel", { class: "rp-range-slider__mark-label" })]);
+						setText(x29, toDisplayString(_for_item0.value.label));
 					});
-					return n21;
+					return n29;
 				});
-				return n22;
+				return n30;
 			}, (mark) => mark.key, 9);
-			return n23;
+			return n31;
 		});
-		setInsertionState(n32, null, 0);
+		setInsertionState(n40, null, 0);
 		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
-			const n28 = t6();
-			const n27 = child(n28);
+			const n36 = t8();
+			const n35 = child(n36);
 			renderEffect(() => {
 				const _thumb = _for_item0.value;
-				setDynamicProps(n28, [unref(getPartAttrs)("thumb", { class: ["rp-range-slider__thumb", `rp-range-slider__thumb--${_thumb}`] }), {
+				setDynamicProps(n36, [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);
+			setInsertionState(n35, null, 0);
 			createSlot("thumb", {
 				thumb: () => _for_item0.value,
 				index: () => _for_key0.value,
@@ -1714,9 +1908,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);
-			return n28;
+			return n36;
 		}, (thumb, index) => thumb, 8);
-		setInsertionState(n32, null, 1);
+		setInsertionState(n40, null, 1);
 		createIf(() => unref(tooltipVisible), () => {
 			const _on_update_overlapping = ($event) => tooltipsOverlapping.value = $event;
 			return createComponent(range_slider_tooltip_default, {
@@ -1736,12 +1930,12 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"onUpdate:overlapping": () => _on_update_overlapping
 			});
 		});
-		n34.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
-		on(n34, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
-		on(n34, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
-		return n35;
+		n42.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
+		on(n42, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
+		on(n42, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
+		return n44;
 	}
-}), [["__scopeId", "data-v-b0e2c3da"]]);
+}), [["__scopeId", "data-v-6bfae0e8"]]);
 //#endregion
 //#region src/components/slider/types.ts
 var sliderParts = [