Knob

<script type="module" src="@arclux/arc-ui"></script>

<!-- Basic labeled knob -->
<arc-knob label="Volume" value="75" min="0" max="100"></arc-knob>

<!-- Bipolar pan knob with a centre detent -->
<arc-knob label="Pan" value="0" min="-50" max="50" detents="0"></arc-knob>

<!-- Filter cutoff with a formatted readout -->
<arc-knob id="cutoff" label="Cutoff" value="8000" min="200" max="16000" step="100"></arc-knob>

<!-- Disabled state -->
<arc-knob label="Locked" value="30" disabled></arc-knob>

<script>
  const cutoff = document.getElementById('cutoff');
  cutoff.format = (v) => v >= 1000 ? (v / 1000).toFixed(1) + ' kHz' : v + ' Hz';

  // Real-time preview while turning
  cutoff.addEventListener('arc-input', (e) => {
    filterNode.frequency.value = e.detail.value;
  });

  // Commit final value on release
  cutoff.addEventListener('arc-change', (e) => {
    savePatch({ cutoff: e.detail.value });
  });
</script>

import { Knob } from '@arclux/arc-ui-react';
import { useState } from 'react';

function ChannelStrip() {
  const [gain, setGain] = useState(0);
  const [pan, setPan] = useState(0);

  return (
    <div style={{ display: 'flex', gap: 32 }}>
      <Knob
        label="Gain"
        value={gain}
        min={-24}
        max={12}
        step={0.5}
        detents={[0]}
        format={(v) => `${v > 0 ? '+' : ''}${v} dB`}
        onArcInput={(e) => setGain(e.detail.value)}
        onArcChange={(e) => saveGain(e.detail.value)}
      />
      <Knob
        label="Pan"
        value={pan}
        min={-50}
        max={50}
        detents={[0]}
        format={(v) => (v === 0 ? 'C' : v < 0 ? `L${-v}` : `R${v}`)}
        onArcInput={(e) => setPan(e.detail.value)}
      />
    </div>
  );
}

<script setup>
import { Knob } from '@arclux/arc-ui-vue';
import { ref } from 'vue';

const cutoff = ref(8000);
const resonance = ref(35);

const hz = (v) => (v >= 1000 ? (v / 1000).toFixed(1) + ' kHz' : v + ' Hz');
</script>

<template>
  <div style="display:flex; gap:32px;">
    <Knob label="Cutoff" :value="cutoff" :min="200" :max="16000" :step="100"
      :format="hz"
      @arc-input="cutoff = $event.detail.value" />
    <Knob label="Resonance" :value="resonance" :min="0" :max="100"
      :detents="[0, 50, 100]"
      @arc-input="resonance = $event.detail.value" />
  </div>
</template>

<script>
  import { Knob } from '@arclux/arc-ui-svelte';

  let attack = 12;
  let decay = 240;
  let sustain = 70;
  let release = 480;

  const ms = (v) => v + ' ms';
</script>

<div style="display:flex; gap:24px;">
  <Knob label="Attack" value={attack} min={0} max={2000} step={4} format={ms}
    on:arc-input={(e) => attack = e.detail.value} />
  <Knob label="Decay" value={decay} min={0} max={2000} step={4} format={ms}
    on:arc-input={(e) => decay = e.detail.value} />
  <Knob label="Sustain" value={sustain} min={0} max={100}
    on:arc-input={(e) => sustain = e.detail.value} />
  <Knob label="Release" value={release} min={0} max={4000} step={8} format={ms}
    on:arc-input={(e) => release = e.detail.value} />
</div>

import { Component } from '@angular/core';
import { Knob } from '@arclux/arc-ui-angular';

@Component({
  imports: [Knob],
  template: `
    <div style="display:flex; gap:32px;">
      <arc-knob label="Drive" [value]="drive" [min]="0" [max]="100"
        (arc-input)="drive = $event.detail.value"></arc-knob>

      <arc-knob label="Mix" [value]="mix" [min]="0" [max]="100"
        [detents]="[50]"
        (arc-input)="onMixPreview($event.detail.value)"
        (arc-change)="onMixCommit($event.detail.value)"></arc-knob>
    </div>
  `,
})
export class EffectPanelComponent {
  drive = 40;
  mix = 50;

  onMixPreview(val: number) { /* live wet/dry preview */ }
  onMixCommit(val: number) { /* persist to the patch */ }
}

import { Knob } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';

function MasterSection() {
  const [volume, setVolume] = createSignal(75);

  return (
    <div>
      <Knob
        label="Master"
        value={volume()}
        min={0}
        max={100}
        format={(v) => v + '%'}
        onArcInput={(e) => setVolume(e.detail.value)}
        onArcChange={(e) => persistVolume(e.detail.value)}
      />
    </div>
  );
}

import { Knob } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';

function SendControls() {
  const [reverb, setReverb] = useState(20);
  const [delay, setDelay] = useState(0);

  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <Knob label="Reverb" value={reverb} min={0} max={100}
        onArcInput={(e) => setReverb(e.detail.value)} />
      <Knob label="Delay" value={delay} min={0} max={100}
        onArcInput={(e) => setDelay(e.detail.value)} />
    </div>
  );
}

<!-- arc-knob is interactive — requires JS -->
<arc-knob></arc-knob>

<!-- arc-knob is interactive — requires JS -->
<arc-knob></arc-knob>