X/Y

Draggable component tied to a (-1, -1):(1, 1) cartesian grid.

This can be used as a joystick, or as a two-dimensional slider. This isn’t a standard control, so your imagination is your only limitation here.

  
X: 0
Y: 0

Name	Type	Description	Preview
width	`number`	Width of the component in pixels	200
height	`number`	Height of the component in pixels	200
circle	`boolean`	Constrain values to a (1, 1) circle?	Circle

Event	Detail	Description
`on:drag`	`{ x:number, y:number, duration: number }`	Called continuously while the user is dragging. Provides x and y position as well as duration which is the time spent dragging in milliseconds.
`on:dragend`	`{ x:number, y:number, duration: number }`	Same as `on:drag` but only called once when the user has stopped dragging. x and y return the final position.

<script lang="ts">
import XY, {type UpdateData} from '../components/xy.svelte';

export let x = 0;
export let y = 0;
export let circle = false;

function handleDrag(data: CustomEvent<UpdateData>) {
  x = data.detail.x;
  y = data.detail.y;
}
</script>

<XY on:drag={handleDrag} on:dragend={handleDrag} {circle} />

<pre>
  <code>
X: {x}
Y: {y}
  </code>
</pre>