# or
yarn add @zag-js/angle-slider @zag-js/react
```

## Anatomy

To set up the angle slider 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 angle-slider package into your project

```jsx
import * as angleSlider from "@zag-js/angle-slider"
```

The angle slider package exports two key functions:

- `machine` â The state machine logic for the angle slider widget as described
  in the WAI-ARIA spec.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll need to provide a unique `id` to the `useMachine` hook. This is used to
> ensure that every part has a unique identifier.

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

```jsx
import * as angleSlider from "@zag-js/angle-slider"
import { normalizeProps, useMachine } from "@zag-js/react"

export function AngleSlider() {
  const service = useMachine(angleSlider.machine, { id: "1" })

  const api = angleSlider.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <label {...api.getLabelProps()}>Wind direction</label>
      <div {...api.getControlProps()}>
        <div {...api.getThumbProps()}></div>
        <div {...api.getMarkerGroupProps()}>
          {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
            <div key={value} {...api.getMarkerProps({ value })}></div>
          ))}
        </div>
      </div>
      <div {...api.getValueTextProps()}>{api.value} degrees</div>
      <input {...api.getHiddenInputProps()} />
    </div>
  )
}
```

### Setting the initial value

Use the `defaultValue` property to set the initial value of the angle slider.

```jsx {2}
const service = useMachine(angleSlider.machine, {
  defaultValue: 45,
})
```

### Controlled angle slider

To control the angle slider's value, pass the `value` and `onValueChange`
properties to the machine function.

```tsx
import { useState } from "react"

export function ControlledAngleSlider() {
  const [value, setValue] = useState(45)

  const service = useMachine(angleSlider.machine, {
    value,
    onValueChange(details) {
      setValue(details.value)
    },
  })

  return (
    // ...
  )
}
```

### Setting the value's granularity

By default, the granularity, is `1`, meaning that the value is always an
integer. You can change the step attribute to control the granularity.

For example, If you need a value between `5` and `10`, accurate to two decimal
places, you should set the value of step to `0.01`:

```jsx {2}
const service = useMachine(angleSlider.machine, {
  step: 0.01,
})
```

### Listening for changes

When the angle slider value changes, the `onValueChange` and `onValueChangeEnd`
callbacks are invoked. You can use this to setup custom behaviors in your app.

```jsx {2-7}
const service = useMachine(angleSlider.machine, {
  onValueChange(details) {
    console.log("value is changing to:", details)
  },
  onValueChangeEnd(details) {
    console.log("value has changed to:", details)
  },
})
```

### Usage within forms

To use angle slider within forms, use the exposed `hiddenInputProps` from the
`connect` function and ensure you pass `name` value to the machine's context. It
will render a hidden input and ensure the value changes get propagated to the
form correctly.

```jsx {2}
const service = useMachine(angleSlider.machine, {
  name: "wind-direction",
})
```

### Using angle slider marks

To show marks or ticks along the angle slider track, use the exposed
`api.getMarkerProps()` method to position the angle slider marks at desired
angles.

```jsx {7-11}
//...

<div {...api.getRootProps()}>
  <label {...api.getLabelProps()}>Wind direction</label>
  <div {...api.getControlProps()}>
    <div {...api.getThumbProps()}></div>
    <div {...api.getMarkerGroupProps()}>
      {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
        <div key={value} {...api.getMarkerProps({ value })}></div>
      ))}
    </div>
  </div>
  <div {...api.getValueTextProps()}>{api.value} degrees</div>
  <input {...api.getHiddenInputProps()} />
</div>
//...
```

## Styling guide

Earlier, we mentioned that each angle slider part has a `data-part` attribute
added to them to select and style them in the DOM.

### Disabled State

When the angle slider is disabled, the `data-disabled` attribute is added to the
root, label, control, thumb and marker.

```css
[data-part="root"][data-disabled] {
  /* styles for root disabled state */
}

[data-part="label"][data-disabled] {
  /* styles for label disabled state */
}

[data-part="control"][data-disabled] {
  /* styles for control disabled state */
}

[data-part="thumb"][data-disabled] {
  /* styles for thumb disabled state */
}

[data-part="range"][data-disabled] {
  /* styles for thumb disabled state */
}
```

### Invalid State

When the slider is invalid, the `data-invalid` attribute is added to the root,
track, range, label, and thumb parts.

```css
[data-part="root"][data-invalid] {
  /* styles for root invalid state */
}

[data-part="label"][data-invalid] {
  /* styles for label invalid state */
}

[data-part="control"][data-invalid] {
  /* styles for control invalid state */
}

[data-part="valueText"][data-invalid] {
  /* styles for output invalid state */
}

[data-part="thumb"][data-invalid] {
  /* styles for thumb invalid state */
}

[data-part="marker"][data-invalid] {
  /* styles for marker invalid state */
}
```

### Styling the markers

```css
[data-part="marker"][data-state="(at|under|over)-value"] {
  /* styles for when the value exceeds the marker's value */
}
```

## Methods and Properties

### Machine Context

The slider machine exposes the following context properties:

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

**`step`**
Type: `number`
Description: The step value for the slider.

**`value`**
Type: `number`
Description: The value of the slider.

**`defaultValue`**
Type: `number`
Description: The initial value of the slider.
Use when you don't need to control the value of the slider.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Description: The callback function for when the value changes.

**`onValueChangeEnd`**
Type: `(details: ValueChangeDetails) => void`
Description: The callback function for when the value changes ends.

**`disabled`**
Type: `boolean`
Description: Whether the slider is disabled.

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

**`invalid`**
Type: `boolean`
Description: Whether the slider is invalid.

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

**`aria-label`**
Type: `string`
Description: The accessible label for the slider thumb.

**`aria-labelledby`**
Type: `string`
Description: The id of the element that labels the slider thumb.

**`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 slider `api` exposes the following methods:

**`value`**
Type: `number`
Description: The current value of the angle slider

**`valueAsDegree`**
Type: `string`
Description: The current value as a degree string

**`setValue`**
Type: `(value: number) => void`
Description: Sets the value of the angle slider

**`dragging`**
Type: `boolean`
Description: Whether the slider is being dragged.

### Data Attributes

**`Root`**

**`data-scope`**: angle-slider
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

**`Label`**

**`data-scope`**: angle-slider
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

**`Control`**

**`data-scope`**: angle-slider
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

**`Thumb`**

**`data-scope`**: angle-slider
**`data-part`**: thumb
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

**`Marker`**

**`data-scope`**: angle-slider
**`data-part`**: marker
**`data-value`**: The value of the item
**`data-state`**: 
**`data-disabled`**: Present when disabled

### CSS Variables

<CssVarTable name="angle-slider" />

### Keyboard Interactions

**`ArrowRight`**
Description: <span>Increments the angle slider based on defined step</span>

**`ArrowLeft`**
Description: <span>Decrements the angle slider based on defined step</span>

**`ArrowUp`**
Description: <span>Decreases the value by the step amount.</span>

**`ArrowDown`**
Description: <span>Increases the value by the step amount.</span>

**`Shift + ArrowUp`**
Description: <span>Decreases the value by a larger step</span>

**`Shift + ArrowDown`**
Description: <span>Increases the value by a larger step</span>

**`Home`**
Description: Sets the value to 0 degrees.

**`End`**
Description: Sets the value to 360 degrees.
The Avatar component is a React component that represents a user avatar or
profile picture. It displays an image or initials within container.

Avatar provides support for fallback text or elements when the image fails to
load, or when the image is not provided.

## Resources


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



## Installation

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

```bash
npm install @zag-js/avatar @zag-js/react