React Components

# Range

## Overview

---

## Anatomy

---

Range

---

## Range

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
aria-label

 | `string[]` | - | `undefined` | The aria-label of each slider thumb. Useful for providing an accessible name to the slider. |
| 

aria-labelledby

 | `string[]` | - | `undefined` | The id of the elements that labels each slider thumb. Useful for providing an accessible name to the slider. |
| 

defaultValue

 | `number[]` | - | `undefined` | The initial selected value(s). Use when you don't need to control the value(s) of the range. |
| 

disabled

 | `boolean` | - | `undefined` | Whether the component is disabled. |
| 

displayBounds

 | `boolean` | - | `undefined` | Whether the range bounds are displayed under the track. |
| 

displayTooltip

 | `boolean` | - | `undefined` | Whether a tooltip with the current thumb value is displayed on drag. |
| 

invalid

 | `boolean` | - | `undefined` | Whether the component is in error state. |
| 

max

 | `number` | - | `undefined` | The maximum value that can be selected. |
| 

min

 | `number` | - | `undefined` | The minimum value that can be selected. |
| 

name

 | `string` | - | `undefined` | The name of the form element. Useful for form submission. |
| 

onDragging

 | `(detail: RangeValueChangeDetail) => void` | - | `undefined` | Callback fired when the thumb moves. |
| 

onValueChange

 | `(detail: RangeValueChangeDetail) => void` | - | `undefined` | Callback fired when the thumb is released. |
| 

step

 | `number` | - | `undefined` | The amount to increment or decrement the value by. |
| 

ticks

 | `RangeTickItem[]` | - | `undefined` | List of tick indicators to display alongside the range. |
| 

value

 | `number[]` | - | `undefined` | The controlled selected value(s). |

## Interfaces

---

### RangeTickCustomItem

-   `label: string`
-   `value: number`

### RangeValueChangeDetail

-   `value: number[]`

## Unions

---

-   `RangeTickItem = number | RangeTickCustomItem`

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-range-thumb-background-color | var(--ods-color-neutral-000) | 
 |
| --ods-range-track-border-radius | calc(var(--ods-theme-border-radius) / 2) | 

 |

## Examples

---

### Default

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'column',
    rowGap: '8px'
  }}>{story()}</div>],
  globals: {
    imports: `import { Range } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Range />
      <Range defaultValue={[50, 75]} />
    </>
}
```

### Disabled

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'column',
    rowGap: '8px'
  }}>{story()}</div>],
  globals: {
    imports: `import { Range } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Range defaultValue={[20]} disabled />
      <Range defaultValue={[50, 75]} disabled />
    </>
}
```

### Min / Max

```jsx
{
  globals: {
    imports: `import { Range } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <p>Max 500</p>
      <Range defaultValue={[50]} max={500} />
      <Range defaultValue={[50, 75]} max={500} />
      <p>Min 25</p>
      <Range defaultValue={[50]} min={25} />
      <Range defaultValue={[50, 75]} min={25} />
      <p>Max 75 & Min 25</p>
      <Range defaultValue={[50]} max={75} min={25} />
      <Range defaultValue={[50, 75]} max={75} min={25} />
    </>
}
```

### Step

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'column',
    rowGap: '8px'
  }}>{story()}</div>],
  globals: {
    imports: `import { Range } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Range defaultValue={[20]} step={5} />
      <Range defaultValue={[50, 75]} step={5} />
    </>
}
```

### Ticks

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'column',
    rowGap: '8px'
  }}>{story()}</div>],
  globals: {
    imports: `import { Range } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Range defaultValue={[20]} ticks={[10, 20, 30, 40, 50, 60, 70, 80, 90]} />
      <Range defaultValue={[50, 75]} ticks={[10, 20, 30, 40, 50, 60, 70, 80, 90]} />
    </>
}
```

### Custom Ticks

```jsx
<>
  <Range ticks={[{
  label: 'Low',
  value: 25
}, {
  label: 'Medium',
  value: 50
}, {
  label: 'High',
  value: 75
}]} />
  <Range displayBounds={false} displayTooltip={false} max={5} min={1} ticks={[{
  label: 'Very Poor',
  value: 1
}, {
  label: 'Poor',
  value: 2
}, {
  label: 'Average',
  value: 3
}, {
  label: 'Good',
  value: 4
}, {
  label: 'Excellent',
  value: 5
}]} />
</>
```

### Controlled

This is a controlled component. The final value is only updated when the user releases the mouse button.

```jsx
const [draggingValue, setDraggingValue] = useState<number>();
  const [value, setValue] = useState<number>();
  function onDragging(detail: RangeValueChangeDetail) {
    setDraggingValue(detail.value[0]);
  }
  function onValueChange(detail: RangeValueChangeDetail) {
    setValue(detail.value[0]);
  }
  return <>
      <p>
        <span>Final value: {value}</span>
        <br />
        <span>Dragged value: {draggingValue}</span>
      </p>
      <Range onDragging={onDragging} onValueChange={onValueChange} value={draggingValue ? [draggingValue] : undefined} />
    </>;
}
```

### Form field

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexFlow: 'column',
    rowGap: '8px'
  }}>{story()}</div>],
  globals: {
    imports: `import { FormField, FormFieldLabel, Range } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <FormFieldLabel>
        Range:      </FormFieldLabel>
      <Range />
    </FormField>
}
```

## Recipes

---

Range Input

0100