修改滑动条

这会导致调色板界面异常，你自己看着办。

components/Slider.vue

@@ -35,6 +35,7 @@
 	const value = computed(() => restrict(model.value, 0));
 	const smoothValue = useSmoothValue(value, 0.5); // 修改这个参数可以调整滑动条的平滑移动值。
 	const buffered = computed(() => restrict(props.buffered, NaN));
+	const thumbEl = ref<HTMLDivElement>(), trackEl = ref<HTMLDivElement>();
 
 	/**
 	 * 重置默认值。
@@ -54,13 +55,13 @@
 	 */
 	function onThumbDown(e: PointerEvent, triggerByTrack: boolean = false) {
 		if (e.button === 1) { resetDefault(e); return; }
-		const thumb = (e.target as HTMLDivElement).parentElement!.querySelector(".thumb") as HTMLDivElement;
-		const track = thumb.parentElement!.querySelector(".track")!;
+		const thumb = thumbEl.value!, track = trackEl.value!;
+		const thumbSize = thumb.offsetWidth;
 		const { left, width: max } = track.getBoundingClientRect();
 		const x = triggerByTrack ? 0 : e.pageX - left - thumb.offsetLeft;
 		const pointerMove = useDebounce((e: PointerEvent) => {
 			const position = clamp(e.pageX - left - x, 0, max);
-			const value = map(position, 0, max, props.min, props.max);
+			const value = map(position, 0, max - thumbSize, props.min, props.max);
 			model.value = value;
 			emits("changing", value);
 		});
@@ -79,9 +80,10 @@
 	 */
 	async function onTrackDown(e: PointerEvent) {
 		if (e.button === 1) { resetDefault(e); return; }
-		const track = e.target as HTMLDivElement;
+		const thumb = thumbEl.value!, track = trackEl.value!;
+		const thumbSizeHalf = thumb.offsetWidth / 2;
 		const { width } = track.getBoundingClientRect();
-		const value = map(e.offsetX, 0, width, props.min, props.max);
+		const value = map(e.offsetX, thumbSizeHalf, width - thumbSizeHalf, props.min, props.max);
 		model.value = value;
 		emits("changing", value);
 		await nextTick();
@@ -112,10 +114,10 @@
 		aria-orientation="horizontal"
 	>
 		<Fragment>
-			<div class="track" @pointerdown="onTrackDown" @contextmenu="onLongPress"></div>
+			<div ref="trackEl" class="track" @pointerdown="onTrackDown" @contextmenu="onLongPress"></div>
 			<div v-show="Number.isFinite(buffered)" class="buffered"></div>
 			<div class="passed"></div>
-			<div class="thumb" @pointerdown="onThumbDown" @contextmenu="onLongPress"></div>
+			<div ref="thumbEl" class="thumb" @pointerdown="onThumbDown" @contextmenu="onLongPress"></div>
 		</Fragment>
 	</Comp>
 </template>
@@ -157,7 +159,7 @@
 	.buffered {
 		@include oval;
 		height: var(--track-thickness);
-		margin: $thumb-size-half;
+		margin: $thumb-size-half 0;
 	}
 
 	.track {
@@ -175,7 +177,7 @@
 	}
 
 	.passed {
-		width: $value;
+		width: calc($value + $thumb-size);
 		background-color: c(accent);
 		opacity: map(var(--value), 0, 1, 0.4, 1, true);
 	}

pages/components.vue

@@ -352,7 +352,7 @@
 						<Button @click="e => showFlyout(e)">全方向缺省</Button>
 						<br />
 						<Button @click="e => flyoutKaomoji = [e, 'top']">向上展开颜文字</Button>
-						<Button @click="e => flyoutKaomoji = [e, 'bottom']">向下颜文字浮窗</Button>
+						<Button @click="e => flyoutKaomoji = [e, 'bottom']">向下展开颜文字</Button>
 					</div>
 				</AccordionItem>
 				<AccordionItem title="分页器测试">