# Slider

## Overview

<figure><img src="/files/3Zek4hT3ryMxoQOU2P2u" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Sliders are used in interfaces where users need to select a value or range within a defined limit. They are ideal for adjustable settings like volume control, brightness, price ranges, or any interactive element requiring a range input.

### How it works

A slider component consists of a track and a draggable handle that users can move to select a specific value, which is visually indicated along the track. Sliders can be customized to display labels in various positions and to show different value ranges, providing flexibility in presentation and functionality.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-range-slider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></dda-range-slider>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaRangeSlider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></DdaRangeSlider>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaRangeSlider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></DdaRangeSlider>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-range-slider
    min="0"
    max="100"
    step="1"
    initial_min="20"
    initial_max="80"
    custom_class=""
    component_mode=""
    left_input_id="left_input"
    right_input_id="right_input"
    left_aria_label="minimum-value"
    right_aria_label="maximum-value"
    left_input_name="left_input"
    right_input_name="right_input"
></dda-range-slider>
```

{% endtab %}
{% endtabs %}

### Properties

| Property           | Description                                                                                                                                             | Type     |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `component_mode`   | Defines the mode of the component (e.g., `dark`, `light`). Used to apply specific styles or behaviors based on the mode.                                | `string` |
| `custom_class`     | A custom CSS class that can be added to the component for additional styling or theming.                                                                | `string` |
| `min`              | The minimum value of the range slider. Defaults to 0.                                                                                                   | `number` |
| `max`              | The maximum value of the range slider. Defaults to 100.                                                                                                 | `number` |
| `step`             | The increment step between each value in the range slider. Defaults to 1.                                                                               | `number` |
| `initial_min`      | The initial minimum value when the component is first rendered. Defaults to 0.                                                                          | `number` |
| `initial_max`      | The initial maximum value when the component is first rendered. Defaults to 100.                                                                        | `number` |
| `size`             | Specifies the size of the range slider (e.g., `small`, `medium`, `large`). This prop can be used for custom styling                                     | `string` |
| `tooltip_position` | Specifies the position of the tooltip relative to the range slider (e.g., `top`, `bottom`, `left`, `right`). Used to position the tooltip on the slider | `string` |
| `left_input_id`    | The unique identifier for the left (min) input element. This ID is used for the label’s `htmlFor` attribute and can be useful for accessibility.        | `string` |
| `right_input_id`   | The unique identifier for the right (max) input element. This ID is used for the label’s `htmlFor` attribute and can be useful for accessibility.       | `string` |
| `left_aria_label`  | The ARIA label for the left (min) input element. Provides an accessible description for screen readers.                                                 | `string` |
| `right_aria_label` | The ARIA label for the right (max) input element. Provides an accessible description for screen readers.                                                | `string` |

## Anatomy

<figure><img src="/files/RwYQnAz0IVoIsBK4n9cu" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Handles**: These are interactive elements that users can drag along the slider's track to adjust the values.

**Track**: This is the line that represents the range of values available on the slider, guiding the movement of the handles.

**Tooltip**: This displays the selected value directly above the handle, providing real-time feedback as the handle is adjusted.

**Percentage Label**: Indicates the current selected value in percentage form, offering a clear visual reference for the slider's position on the scale.

## Dos and Don'ts

<table><thead><tr><th width="412">Dos</th><th>Don'ts</th></tr></thead><tbody><tr><td>Use sliders for selecting values within a range.</td><td>Don't use sliders for selecting discrete, non-sequential values.</td></tr><tr><td>Label the slider clearly to indicate its purpose.</td><td>Avoid using ambiguous or unclear labels for sliders.</td></tr><tr><td>Ensure the slider is large enough to be easily draggable.</td><td>Don't make the slider handle too small to interact with comfortably.</td></tr><tr><td>Provide visual feedback to indicate the selected value.</td><td>Don't leave users guessing about the current value.</td></tr><tr><td>Use consistent styling and spacing across all sliders in the application.</td><td>Don't use inconsistent styles that may confuse users.</td></tr><tr><td>Update the slider in real-time as the handle is dragged.</td><td>Don't use sliders if you cannot provide real-time updates.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.