# or
yarn add @zag-js/signature-pad @zag-js/solid
```

## Anatomy

To set up the signature pad correctly, you'll need to understand its anatomy and
how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the signature pad package into your project

```jsx
import * as signaturePad from "@zag-js/signature-pad"
```

The signature pad package exports two key functions:

- `machine` â The state machine logic for the signature pad widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

Next, import the required hooks and functions for your framework and use the
signature pad machine in your project ð¥

```jsx
import * as signaturePad from "@zag-js/signature-pad"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function SignaturePad() {
  const service = useMachine(signaturePad.machine, {
    id: createUniqueId(),
  })

  const api = createMemo(() => signaturePad.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <label {...api().getLabelProps()}>Signature Pad</label>

      <div {...api().getControlProps()}>
        <svg {...api().getSegmentProps()}>
          {api().paths.map((path, i) => (
            <path key={i} {...api().getSegmentPathProps({ path })} />
          ))}
          {api().currentPath && (
            <path {...api().getSegmentPathProps({ path: api().currentPath })} />
          )}
        </svg>

        <button {...api().getClearTriggerProps()}>X</button>

        <div {...api().getGuideProps()} />
      </div>
    </div>
  )
}
```

### Listening to drawing events

The signature pad component emits the following events:

- `onDraw`: Emitted when the user is drawing the signature.
- `onDrawEnd`: Emitted when the user stops drawing the signature.

```jsx
const service = useMachine(signature.machine, {
  onDraw(details) {
    // details => { path: string[] }
    console.log("Drawing signature", details)
  },
  onDrawEnd(details) {
    // details => { path: string[], toDataURL: () => string }
    console.log("Signature drawn", details)
  },
})
```

### Clearing the signature

To clear the signature, use the `api.clear()`, or render the clear trigger
button.

```jsx
<button onClick={() => api.clear()}>Clear</button>
```

### Rendering an image preview

Use the `api.getDataUrl()` method to get the signature as a data URL and render
it as an image.

> You can also leverage the `onDrawEnd` event to get the signature data URL.

```jsx
const service = useMachine(signature.machine, {
  onDrawEnd(details) {
    details.getDataUrl("image/png").then((url) => {
      // set the image URL in local state
      setImageURL(url)
    })
  },
})
```

Next, render the image preview using the URL.

```jsx
<img src={imageURL} alt="Signature" />
```

### Changing the stroke color

To change the stroke color, set the `drawing.fill` option to a valid CSS color.

> Note: You can't use a css variable as the stroke color.

```jsx
const service = useMachine(signature.machine, {
  drawing: {
    fill: "red",
  },
})
```

### Changing the stroke width

To change the stroke width, set the `drawing.size` option to a number.

```jsx
const service = useMachine(signature.machine, {
  drawing: {
    size: 5,
  },
})
```

### Simulating pressure sensitivity

Pressure sensitivity is disabled by default. To enable it, set the
`drawing.simulatePressure` option to `true`.

```jsx
const service = useMachine(signature.machine, {
  drawing: {
    simulatePressure: true,
  },
})
```

### Usage in forms

To use the signature pad in a form, set the `name` context property.

```jsx
const service = useMachine(signature.machine, {
  name: "signature",
})
```

Then, render the hidden input element using `api.getHiddenInputProps()`.

```jsx
<input {...api.getHiddenInputProps({ value: imageURL })} />
```

### Disabling the signature pad

Set the `disabled` context property to `true` to disable the signature pad.

```jsx
const service = useMachine(signature.machine, {
  disabled: true,
})
```

### Making the signature pad read-only

Set the `readOnly` context property to `true` to make the signature pad
read-only.

```jsx
const service = useMachine(signature.machine, {
  readOnly: true,
})
```

## Methods and Properties

The signature pad `api` exposes the following methods and properties:

### Machine Context

The signature pad machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; control: string; hiddenInput: string; label: string; }>`
Description: The ids of the signature pad elements. Useful for composition.

**`translations`**
Type: `IntlTranslations`
Description: The translations of the signature pad. Useful for internationalization.

**`onDraw`**
Type: `(details: DrawDetails) => void`
Description: Callback when the signature pad is drawing.

**`onDrawEnd`**
Type: `(details: DrawEndDetails) => void`
Description: Callback when the signature pad is done drawing.

**`drawing`**
Type: `DrawingOptions`
Description: The drawing options.

**`disabled`**
Type: `boolean`
Description: Whether the signature pad is disabled.

**`required`**
Type: `boolean`
Description: Whether the signature pad is required.

**`readOnly`**
Type: `boolean`
Description: Whether the signature pad is read-only.

**`name`**
Type: `string`
Description: The name of the signature pad. Useful for form submission.

**`defaultPaths`**
Type: `string[]`
Description: The default paths of the signature pad.
Use when you don't need to control the paths of the signature pad.

**`paths`**
Type: `string[]`
Description: The controlled paths of the signature pad.

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

### Machine API

The signature pad `api` exposes the following methods:

**`empty`**
Type: `boolean`
Description: Whether the signature pad is empty.

**`drawing`**
Type: `boolean`
Description: Whether the user is currently drawing.

**`currentPath`**
Type: `string`
Description: The current path being drawn.

**`paths`**
Type: `string[]`
Description: The paths of the signature pad.

**`getDataUrl`**
Type: `(type: DataUrlType, quality?: number) => Promise<string>`
Description: Returns the data URL of the signature pad.

**`clear`**
Type: `VoidFunction`
Description: Clears the signature pad.

### Data Attributes

**`Label`**

**`data-scope`**: signature-pad
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-required`**: Present when required

**`Root`**

**`data-scope`**: signature-pad
**`data-part`**: root
**`data-disabled`**: Present when disabled

**`Control`**

**`data-scope`**: signature-pad
**`data-part`**: control
**`data-disabled`**: Present when disabled

**`Guide`**

**`data-scope`**: signature-pad
**`data-part`**: guide
**`data-disabled`**: Present when disabled
A slider allows users to make selections from a range of values. Think of it as
a custom `<input type='range'/>` with the ability to achieve custom styling and
accessibility.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/slider)
[Logic Visualizer](https://zag-visualizer.vercel.app/slider)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/slider)



**Features**

- Supports centered origin (slider starting at center, instead of start
  position)
- Fully managed keyboard navigation
- Supports touch or click on track to update value
- Supports Right-to-Left directionality
- Support for horizontal and vertical orientations
- Prevents text selection while dragging

## Installation

To use the slider machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/slider @zag-js/solid