XYPad

Two-dimensional slider component.

Source

Import

import { XYPad, XYPadThumb, XYPadArea } from '@tremolo-ui/react'

Examples

Basic

Loading...

function App() {
  const [valueX, setValueX] = useState(32)
  const [valueY, setValueY] = useState(56)

  return (
    <div>
      <XYPad
        x={{
          value: valueX,
          min: 0,
          max: 100,
        }}
        y={{
          value: valueY,
          min: 0,
          max: 100,
        }}
        onChange={(x, y) => {
          setValueX(x)
          setValueY(y)
        }}
      />
      <p>
        x: {valueX}, y: {valueY}
      </p>
    </div>
  )
}