init

tools/controls/RangeSlider.tsx

@@ -0,0 +1,27 @@
+import type { Component, JSX } from "solid-js";
+import style from "./controls.module.css";
+
+export const RangeSlider: Component<{
+	name: string;
+	min: number;
+	max: number;
+	step: number;
+	value: number;
+	children?: JSX.Element;
+	onChange?: (value: number) => void;
+	onInput?: (value: number) => void;
+}> = (props) => (
+	<label class={style.rangeSlider}>
+		{props.children}
+		<input
+			type="range"
+			name={props.name}
+			min={props.min}
+			max={props.max}
+			step={props.step}
+			value={props.value}
+			onChange={(e) => props.onChange?.(e.target.valueAsNumber)}
+			onInput={(e) => props.onInput?.(e.target.valueAsNumber)}
+		/>
+	</label>
+);