Server/frontend/src/lib/components/bforms/BFormIntensityOption.svelte

<script lang="ts">
	import BFormOption from "./BFormOption.svelte";
	import BFormParameter from "./BFormParameter.svelte";
  
  export let value: number | null;

  function update(percentage: number) {
    if (value !== null) {
      value = percentage / 100;
    }
  }

  function toggle() {
    if (value === null) {
      value = 0.50;
    } else {
      value = null;
    }
  }

  let percentage: number
  $: percentage = Math.round(Math.max(Math.min((value || 0) * 100, 100), 0));
  $: update(percentage);
</script>

<BFormOption on:click={toggle} icon="cirlce_notch" state={(value !== null) || null}>
  <BFormParameter type="number" label="%" bind:value={percentage} min={0} max={100} step={1} narrower />
</BFormOption>