---
title: "Slider"
description: "A value picked by dragging along a track, with its formatted value beside the label. Two values make a range whose thumbs never cross."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

## One value

```tsx
import { useState } from 'react';
import { Slider } from '@arbol-ai/ui';

const SpeedExample = () => {
  const [speed, setSpeed] = useState(1);
  return (
    <Slider
      className="max-w-sm"
      label="Speaking speed"
      maxValue={1.2}
      minValue={0.7}
      onChange={setSpeed}
      step={0.05}
      value={speed}
    />
  );
};

<SpeedExample />
```

## A range

```tsx
import { Slider } from '@arbol-ai/ui';

<Slider
  className="max-w-sm"
  defaultValue={[60_000, 180_000]}
  formatOptions={{ currency: 'COP', maximumFractionDigits: 0, style: 'currency' }}
  label="Consultation price"
  maxValue={300_000}
  step={10_000}
/>
```

## Without a visible label

```tsx
import { Slider } from '@arbol-ai/ui';

<div className="flex max-w-sm items-center gap-3 text-sm">
  <span aria-hidden>A</span>
  <Slider aria-label="Text size" defaultValue={16} maxValue={24} minValue={12} />
  <span aria-hidden className="text-lg">
    A
  </span>
</div>
```

## Source

The examples above are [`src/components/slider/slider.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/slider/slider.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/slider/index.mdx