color-synth

a synth that generates colors instead of sounds
Log | Files | Refs | README

Control.svelte (1011B)

      1 <script lang="ts">
      2 	import { RANGE, inp, rescale, wrangle, type Input, type NumberRange } from '$lib/types';
      3 	import DumbSlider from './DumbSlider.svelte';
      4 
      5 	export let input: Input;
      6 	export let controlRange: NumberRange;
      7 	export let setInput: (i: Input) => void;
      8 
      9 	const updateValue = (controlValue: number) => {
     10 		const n = Math.round(rescale(controlValue, controlRange, RANGE.signal));
     11 		setInput(inp.setValue(input, n));
     12 	};
     13 
     14 	let value: number | null;
     15 	$: value = Object.hasOwn(input, 'value')
     16 		? Math.round(wrangle(input.value!, RANGE.signal, controlRange))
     17 		: null;
     18 
     19 	$: slotProps = { range: controlRange, value: value || 0, update: updateValue };
     20 </script>
     21 
     22 <div>
     23 	{#if value !== null}
     24 		<input type="number" {value} on:input={(e) => updateValue(Number(e.currentTarget?.value))} />
     25 		{#if $$slots.default}
     26 			<slot props={{ range: controlRange, value: value || 0, update: updateValue }} />
     27 		{:else}
     28 			<DumbSlider range={controlRange} value={value || 0} update={updateValue} />
     29 		{/if}
     30 	{/if}
     31 </div>