zenno: wrapper component for race length inputs

zenno/src/lib/RaceLenSlider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		value: number;
+	}
+
+	let { value = $bindable() }: Props = $props();
+</script>
+
+<div class="flex">
+	<input
+		class="my-auto w-full grow justify-self-center-safe"
+		type="range"
+		id="raceLen"
+		min="1000"
+		max="3600"
+		step="100"
+		bind:value
+	/>
+	<span class="my-auto flex-none pl-4 text-sm">{value}m</span>
+</div>

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>
+			<label class="my-auto mr-2 hidden flex-none pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
-			<input
+			<RaceLenSlider bind:value={raceLen} />
-				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>
 		</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>
+			<label class="my-auto mr-2 hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
-			<input
+			<RaceLenSlider bind:value={raceLen} />
-				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 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)}

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

@@ -5,6 +5,7 @@
 	import * as race from '$lib/race';
 	import StatChart from '$lib/StatChart.svelte';
 	import { resolve } from '$app/paths';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	function modemean(x: number, bonus: number, p: number): number {
 		return x * (1 - p) + x * bonus * p;
@@ -174,16 +175,9 @@
 			/>
 			<div class="mx-auto grid w-full grid-cols-3 gap-y-6 md:max-w-2xl md:grid-cols-7">
 				{#if pick?.len}
-					<input
+					<div class="col-span-3 my-auto mr-4">
-						class="col-span-2 my-auto w-full justify-self-center-safe"
+						<RaceLenSlider bind:value={raceLen} />
-						type="range"
+					</div>
-						id="raceLen"
-						min="1000"
-						max="3600"
-						step="100"
-						bind:value={raceLen}
-					/>
-					<span class="col-span-1 my-auto pl-2 text-sm">{raceLen}m</span>
 				{/if}
 				{#if pick?.style}
 					<select class="col-span-1 my-auto text-sm md:col-span-2" id="stylePick" bind:value={style}>

zenno/src/routes/race/carryover/+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 rawSpeed = $state(1200);
 	let rawPower = $state(1200);
@@ -231,16 +232,9 @@
 	</div>
 
 	<div class="mb-auto grid max-w-4xl grid-cols-6 rounded-md text-center shadow-md ring md:col-span-6">
-		<input
+		<div class="col-span-full m-4">
-			class="col-span-4 m-4 w-full justify-self-center-safe"
+			<RaceLenSlider bind:value={raceLen} />
-			type="range"
+		</div>
-			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>
 		<select id="surface" bind:value={surface} class="col-span-2 mx-2 mb-4">
 			<option value={race.Surface.Turf}>Turf</option>
 			<option value={race.Surface.Dirt}>Dirt</option>

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
+		<div class="col-span-6 mx-4 mt-4">
-			class="col-span-4 m-4 w-full justify-self-center-safe"
+			<RaceLenSlider bind:value={raceLen} />
-			type="range"
+		</div>
-			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>
 		<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>

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

@@ -18,6 +18,7 @@
 	import StatChart from '$lib/StatChart.svelte';
 	import { resolve } from '$app/paths';
 	import SpeedDur from './SpeedDur.svelte';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -112,8 +113,7 @@
 		</select>
 	</div>
 	<div class="m-4 md:col-span-2 md:col-start-2">
-		<label for="raceLen">Race Distance</label>
+		<RaceLenSlider bind:value={raceLen} />
-		<input type="number" id="raceLen" required min="1000" max="3600" step="100" bind:value={raceLen} class="w-full" />
 	</div>
 	<div class="m-4 self-center md:col-span-2">
 		<label for="isRunaway" class="mr-1 align-middle">Runaway</label>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ComputedSeries } from '$lib/chart';
 	import * as race from '$lib/race';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 	import StatChart from '$lib/StatChart.svelte';
 	import CalcInfo from '../CalcInfo.svelte';
 
@@ -98,8 +99,7 @@
 		</select>
 	</div>
 	<div class="m-4 md:col-start-2">
-		<label for="raceLen">Race Distance</label>
+		<RaceLenSlider bind:value={raceLen} />
-		<input type="number" id="raceLen" required min="1000" max="3600" step="100" bind:value={raceLen} class="w-full" />
 	</div>
 	<div class="m-4 self-center">
 		<label for="isCareer" class="mr-1 align-middle">In Career</label>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as course from '$lib/course';
 	import * as race from '$lib/race';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 	import * as recovery from '$lib/racelib/recovery';
 	import HPChart from './HPChart.svelte';
 	import InfoPanels from './InfoPanels.svelte';
@@ -277,16 +278,7 @@
 </div>
 <div class="mx-auto my-2 grid max-w-5xl grid-cols-1 gap-4 rounded-md text-center shadow-md ring md:grid-cols-6">
 	<div class="m-4 flex md:col-span-2">
-		<input
+		<RaceLenSlider bind:value={raceLen} />
-			class="col-span-2 my-auto w-full justify-self-center-safe"
-			type="range"
-			id="raceLen"
-			min="1000"
-			max="3600"
-			step="100"
-			bind:value={raceLen}
-		/>
-		<span class="my-auto pl-2 text-sm">{raceLen}m</span>
 	</div>
 	<select id="surface" class="m-4" bind:value={surface}>
 		<option value={race.Surface.Turf}>Turf</option>