# or
yarn add @zag-js/slider @zag-js/solid
```

## Anatomy

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

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

The range slider package exports two key functions:

- `machine` â The state machine logic for the 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
range slider machine in your project ð¥

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

export function RangeSlider() {
  const service = useMachine(slider.machine, {
    id: createUniqueId(),
    name: "quantity",
    defaultValue: [10, 60],
  })

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

  return (
    <div {...api().getRootProps()}>
      <div {...api().getControlProps()}>
        <div {...api().getTrackProps()}>
          <div {...api().getRangeProps()} />
        </div>
        <For each={api().value}>
          {(_, index) => (
            <div {...api().getThumbProps({ index: index() })}>
              <input {...api().getHiddenInputProps({ index: index() })} />
            </div>
          )}
        </For>
      </div>
    </div>
  )
}
```

## Changing the orientation

By default, the slider is assumed to be horizontal. To change the orientation to
vertical, set the `orientation` property in the machine's context to `vertical`.

In this mode, the slider will use the arrow up and down keys to
increment/decrement its value.

> Don't forget to change the styles of the vertical slider by specifying its
> height

```jsx {2}
const service = useMachine(slider.machine, {
  orientation: "vertical",
})
```

## Setting the initial value

```jsx {2}
const service = useMachine(slider.machine, {
  defaultValue: [30, 60],
})
```

## Specifying the minimum and maximum

By default, the minimum is `0` and the maximum is `100`. If that's not what you
want, you can easily specify different bounds by changing the values of the min
and/or max attributes.

For example, to ask the user for a value between `-10` and `10`, you can use:

```jsx {2-3}
const service = useMachine(slider.machine, {
  min: -10,
  max: 10,
})
```

## 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 {4}
const service = useMachine(slider.machine, {
  min: 5,
  max: 10,
  step: 0.01,
})
```

## Listening for changes

When the 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(slider.machine, {
  onValueChange(details) {
    // details => { values: number[] }
    console.log("value changing to:", details)
  },
  onValueChangeEnd(details) {
    // details => { values: number[] }
    console.log("value has changed to:", details)
  },
})
```

## Preventing thumb overlap

By default, the range slider thumbs are allowed to overlap when their values are
equal. To prevent this, use the `minStepsBetweenThumbs` to avoid thumbs with
equal values.

```jsx {2}
const service = useMachine(slider.machine, {
  minStepsBetweenThumbs: 1,
})
```

## Usage within forms

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

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

## RTL Support

The slider has built-in support for RTL alignment and interaction. In the RTL
mode, operations are performed from right to left, meaning, the left arrow key
will increment and the right arrow key will decrement.

To enable RTL support, pass the `dir: rtl` context property

```jsx {2}
const service = useMachine(slider.machine, {
  dir: "rtl",
})
```

> While we take care of the interactions in RTL mode, you'll have to ensure you
> apply the correct CSS styles to flip the layout.

## Styling guide

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

### Focused State

When the slider thumb is focused, the `data-focus` attribute is added to the
root, control, thumb and label parts.

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

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

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

[data-part="track"][data-focus] {
  /* styles for track focus state */
}

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

### Disabled State

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

```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="value-text"][data-disabled] {
  /* styles for output disabled state */
}

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

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

### Orientation

```css
[data-part="root"][data-orientation="(horizontal|vertical)"] {
  /* styles for horizontal or vertical  */
}

[data-part="thumb"][data-orientation="(horizontal|vertical)"] {
  /* styles for horizontal or vertical  */
}

[data-part="track"][data-orientation="(horizontal|vertical)"] {
  /* styles for horizontal or vertical  */
}
```

## Methods and Properties

### Machine Context

The slider machine exposes the following context properties:

<ContextTable name="slider" />

### Machine API

The slider `api` exposes the following methods:

<ApiTable name="slider" />

### Data Attributes

<DataAttrTable name="slider" />

## Accessibility

Adheres to the
[Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb).

### Keyboard Interactions

**`ArrowRight`**
Description: <span>Increments the focused thumb based on defined step</span>

**`ArrowLeft`**
Description: <span>Decrements the focused thumb based on defined step</span>

**`ArrowUp`**
Description: <span>Increases the focused thumb by the step amount.</span>

**`ArrowDown`**
Description: <span>Decreases the focused thumb by the step amount.</span>

**`PageUp`**
Description: <span>Increases the focused thumb value by a larger step</span>

**`PageDown`**
Description: <span>Decreases the focused thumb value by a larger step</span>

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

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

**`Home`**
Description: Sets the focused thumb value to its minimum.

**`End`**
Description: Sets the focused thumb value to its maximum.
A splitter allow create dynamic layouts split into vertically or horizontally
arranged panes. Panes are separated by the splitter bars that allow dragging to
resize or expand/collapse them.

## Resources


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



**Features**

- Built with flexbox for flexible layout and SSR
- Support both dynamic horizontal and vertical panels
- Support multiple panels and splitters
- Support for collapsible panels
- Support for panel constraints like min and max sizes
- Programmatic control of panel sizes
- Implements the
  [Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
  for accessibility and keyboard controls

## Installation

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

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