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>
+);

tools/controls/controls.module.css

@@ -0,0 +1,70 @@
+.rangeSlider {
+	width: 100%;
+	color: var(--c-fg-2);
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+	align-items: center;
+	gap: var(--sp-2);
+	font-family: var(--font-sans);
+	font-weight: bold;
+	padding: var(--sp-2);
+}
+
+.rangeSlider [type="range"] {
+	cursor: pointer;
+	appearance: none;
+	background: transparent;
+	border-radius: var(--sp-2);
+	height: var(--sp-3);
+	flex: auto;
+
+	&:focus {
+		outline: 0;
+	}
+
+	&::-webkit-slider-runnable-track {
+		width: 100%;
+		height: var(--sp-2);
+		border-radius: var(--sp-3);
+		color: transparent;
+		background: var(--c-bg-3);
+		border: none;
+	}
+	&::-webkit-slider-thumb {
+		height: var(--sp-3);
+		width: var(--sp-3);
+		border-radius: var(--sp-3);
+		border: none;
+		background: var(--c-fg-1);
+		margin-top: calc(var(--sp-1) * -1);
+		--webkit-appearance: none;
+		appearance: none;
+	}
+	&:focus::-webkit-slider-thumb {
+		outline-width: 2px;
+		outline-style: solid;
+		outline-color: var(--c-primary);
+	}
+
+	&::-moz-range-track {
+		width: 100%;
+		height: var(--sp-2);
+		border-radius: var(--sp-3);
+		color: transparent;
+		background: var(--c-bg-3);
+		border: none;
+	}
+	&::-moz-range-thumb {
+		height: var(--sp-3);
+		width: var(--sp-3);
+		border-radius: var(--sp-3);
+		border: none;
+		background: var(--c-fg-1);
+	}
+	&:focus::-moz-range-thumb {
+		outline-width: 2px;
+		outline-style: solid;
+		outline-color: var(--c-primary);
+	}
+}