Knob

Interactive rotary knob component implemented in SVG.

Source

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
        value={value}
        min={0}
        max={100}
        size={50}
        onChange={(v) => setValue(v)}
      />
      {value}
    </div>
  )
}