Knob

Interactive rotary knob component implemented in SVG.

Source Style

Import

import { Knob } from '@tremolo-ui/react'

Examples

Basic

Loading...

function App() {
  const [value, setValue] = useState(64)

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
      }}
    >
      <Knob.Root
        value={value}
        min={0}
        max={100}
        size={50}
        onChange={(v) => setValue(v)}
      >
        <Knob.SVGRoot>
          <Knob.ActiveLine />
          <Knob.InactiveLine />
          <Knob.Thumb />
        </Knob.SVGRoot>
      </Knob.Root>
      {value}
    </div>
  )
}