Factor out numeric-slider.tsx.

lib/numeric-slider.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { float } from "./util";
+
+export type NumericSliderProps = {
+  id: string;
+  label: string;
+  onChange: (value: number) => void;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  valueSuffix?: string;
+};
+
+export const NumericSlider: React.FC<NumericSliderProps> = (props) => {
+  return (
+    <p>
+      <label htmlFor={props.id}>{props.label}: </label>
+      <input
+        type="range"
+        id={props.id}
+        min={props.min}
+        max={props.max}
+        value={props.value}
+        step={props.step}
+        onChange={(e) => props.onChange(float(e.target.value))}
+      />
+      <span>
+        {" "}
+        {props.value}
+        {props.valueSuffix}
+      </span>
+    </p>
+  );
+};

lib/pages/creature-page.tsx

@@ -21,6 +21,7 @@ import {
 import { HoverDebugHelper } from "../hover-debug-helper";
 import { svgScale, SvgTransforms } from "../svg-transform";
 import { ColorWidget } from "../color-widget";
+import { NumericSlider } from "../numeric-slider";
 
 const DEFAULT_BG_COLOR = "#858585";
 
@@ -209,19 +210,18 @@ export const CreaturePage: React.FC<{}> = () => {
         />{" "}
       </SymbolContextWidget>
       <p>
-        <label htmlFor="complexity">Random creature complexity: </label>
+        <NumericSlider
-        <input
+          id="complexity"
-          type="range"
+          label="Random creature complexity"
           min={0}
           max={MAX_COMPLEXITY_LEVEL}
           step={1}
           value={complexity}
-          onChange={(e) => {
+          onChange={(value) => {
-            setComplexity(parseInt(e.target.value));
+            setComplexity(value);
             newRandomSeed();
           }}
-        />{" "}
+        />
-        {complexity}
       </p>
       <p>
         <label>

lib/pages/waves-page.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { ColorWidget } from "../color-widget";
+import { NumericSlider } from "../numeric-slider";
 
 const WAVE_STROKE = "#79beda";
 const WAVE_FILL = "#2b7c9e";
@@ -62,37 +63,6 @@ const WAVE_PARALLAX_SCALE_VELOCITY = 1.25;
 const WAVE_PARALLAX_TRANSLATE_VELOCITY = 30;
 const WAVE_PARALLAX_TRANSLATE_ACCEL = 10;
 
-const NumericSlider: React.FC<{
-  id: string;
-  label: string;
-  onChange: (value: number) => void;
-  value: number;
-  min: number;
-  max: number;
-  step: number;
-  valueSuffix?: string;
-}> = (props) => {
-  return (
-    <p>
-      <label htmlFor={props.id}>{props.label}</label>
-      <input
-        type="range"
-        id={props.id}
-        min={props.min}
-        max={props.max}
-        value={props.value}
-        step={props.step}
-        onChange={(e) => props.onChange(parseFloat(e.target.value))}
-      />
-      <span>
-        {" "}
-        {props.value}
-        {props.valueSuffix}
-      </span>
-    </p>
-  );
-};
-
 const Waves: React.FC<{}> = () => {
   const [stroke, setStroke] = useState(WAVE_STROKE);
   const [fill, setFill] = useState(WAVE_FILL);

lib/symbol-context-widget.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ColorWidget } from "./color-widget";
+import { NumericSlider } from "./numeric-slider";
 import { SvgSymbolContext, swapColors } from "./svg-symbol";
-import { float } from "./util";
 
 export const SymbolContextWidget: React.FC<{
   ctx: SvgSymbolContext;
@@ -41,18 +41,15 @@ export const SymbolContextWidget: React.FC<{
       {ctx.uniformStrokeWidth !== undefined && (
         <>
           <br />
-          <label htmlFor="strokeWidth">Stroke width: </label>
+          <NumericSlider
-          <input
+            id="strokeWidth"
-            type="range"
+            label="Stroke width"
             min={0}
             max={3}
             step={0.1}
             value={ctx.uniformStrokeWidth}
-            onChange={(e) =>
+            onChange={(uniformStrokeWidth) => updateCtx({ uniformStrokeWidth })}
-              updateCtx({ uniformStrokeWidth: float(e.target.value) })
-            }
           />{" "}
-          {ctx.uniformStrokeWidth}{" "}
         </>
       )}
     </p>