zenno: wrapper component for race length inputs

2026-09-22 10:59:29 -04:00
parent fde5b4fd20
commit 86583e68d1
8 changed files with 43 additions and 66 deletions
@@ -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
-						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="col-span-1 my-auto pl-2 text-sm">{raceLen}m</span>
+					<div class="col-span-3 my-auto mr-4">
+						<RaceLenSlider bind:value={raceLen} />
+					</div>
 				{/if}
 				{#if pick?.style}
 					<select class="col-span-1 my-auto text-sm md:col-span-2" id="stylePick" bind:value={style}>