zenno: wrapper component for race length inputs

zenno/src/routes/doc/frbm/+page.svelte

@@ -26,6 +26,7 @@
 	import Article from '../Article.svelte';
 	import Sec from '../Sec.svelte';
 	import * as skill from '$lib/data/skill';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let raceLen = $state(2000);
 	let secSpeedStyle = $state(RunningStyle.FrontRunner);
@@ -514,17 +515,8 @@
 			plotOptions={{ color: { legend: true } }}
 		/>
 		<div class="mx-auto flex w-full md:max-w-2xl">
-			<label class="my-auto hidden flex-none pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
-			<input
-				class="my-auto max-w-40 flex-1 md:flex-2"
-				type="range"
-				id="secSpeedRaceLen"
-				min="1000"
-				max="3600"
-				step="100"
-				bind:value={raceLen}
-			/>
-			<span class="my-auto flex-none pl-2 text-sm">{raceLen}m</span>
+			<label class="my-auto mr-2 hidden flex-none pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
+			<RaceLenSlider bind:value={raceLen} />
 		</div>
 	</div>
 	<p>
@@ -669,17 +661,8 @@
 			plotOptions={{ color: { legend: true } }}
 		/>
 		<div class="mx-auto flex w-full md:max-w-2xl">
-			<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
-			<input
-				class="my-auto max-w-40 flex-1 md:flex-2"
-				type="range"
-				id="secSpeedRaceLen"
-				min="1000"
-				max="3600"
-				step="100"
-				bind:value={raceLen}
-			/>
-			<span class="my-auto flex-1 pl-2 text-sm">{raceLen}m</span>
+			<label class="my-auto mr-2 hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
+			<RaceLenSlider bind:value={raceLen} />
 			<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedStyle">Style</label>
 			<select class="my-auto flex-1 text-sm" id="secSpeedStyle" bind:value={secSpeedStyle}>
 				{#each RUNNING_STYLES as [name, style] (style)}