zenno: wrapper component for race length inputs

zenno/src/routes/race/gate/+page.svelte

@@ -4,6 +4,7 @@
 	import * as accel from '$lib/racelib/accel';
 	import type { Attachment } from 'svelte/attachments';
 	import CalcInfo from '../CalcInfo.svelte';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -216,16 +217,9 @@
 		</div>
 	</div>
 	<div class="mb-auto grid max-w-4xl grid-cols-6 rounded-md text-center shadow-md ring md:col-span-3">
-		<input
-			class="col-span-4 m-4 w-full justify-self-center-safe"
-			type="range"
-			id="raceLen"
-			min="1000"
-			max="3600"
-			step="100"
-			bind:value={raceLen}
-		/>
-		<span class="col-span-2 my-auto mb-4 pl-2 text-sm">{raceLen}m</span>
+		<div class="col-span-6 mx-4 mt-4">
+			<RaceLenSlider bind:value={raceLen} />
+		</div>
 		<select id="surface" bind:value={surface} class="col-span-2 m-4">
 			<option value={race.Surface.Turf}>Turf</option>
 			<option value={race.Surface.Dirt}>Dirt</option>