diff --git a/src/lib/components/common/Slider.svelte b/src/lib/components/common/Slider.svelte
index 8100b9a..2bbd19b 100644
--- a/src/lib/components/common/Slider.svelte
+++ b/src/lib/components/common/Slider.svelte
@@ -37,16 +37,27 @@
 		return `background: linear-gradient(to right, var(--brand-primary) 0%, var(--brand-primary) ${percentage}%, var(--stroke) ${percentage}%, var(--stroke) 100%)`
 	})
 
-	function handleInput(e: Event) {
+	function applySnap(e: Event): void {
 		if (snapToCenter !== undefined) {
+			const target = e.target as HTMLInputElement
+			const raw = parseFloat(target.value)
 			const mid = (min + max) / 2
-			if (Math.abs(value - mid) <= snapToCenter) {
+			if (Math.abs(raw - mid) <= snapToCenter) {
 				value = mid
-				;(e.target as HTMLInputElement).value = String(mid)
+				target.value = String(mid)
 			}
 		}
+	}
+
+	function handleInput(e: Event) {
+		applySnap(e)
 		oninput?.(e)
 	}
+
+	function handleChange(e: Event) {
+		applySnap(e)
+		onchange?.(e)
+	}
 </script>
 
 <input
@@ -59,7 +70,7 @@
 	class="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-surface-2 disabled:cursor-not-allowed disabled:opacity-50 {className}"
 	style={backgroundStyle}
 	oninput={handleInput}
-	{onchange}
+	onchange={handleChange}
 />
 
 <style>
diff --git a/src/lib/stores/player.ts b/src/lib/stores/player.ts
index d56c767..7cb710d 100644
--- a/src/lib/stores/player.ts
+++ b/src/lib/stores/player.ts
@@ -607,6 +607,7 @@ function createPlayerStore() {
 			setStoredNumber('player.speed', speed)
 
 			if (state.playbackSource === 'preview') {
+				previewPlayer.setPlaybackRate(speed)
 				update((s) => ({
 					...s,
 					playbackState: { ...s.playbackState, speed },