# Slider

### Usage

Sliders allow users to instantly choose a numeric value within a given range. Slider is to be used when quickly defining the precise value won’t matter to the user, but rather only the approximate range. Slider can be used to request single value or range of values from the user in a continuous or discrete manner. Data set can be represented with a linear or logarithmic progression, as appropriate.

**Standard Slider**

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbpvY82-bjSkrJXqOR%2FOne%20slide.png?alt=media\&token=e0f4ec43-ec5e-4ee7-8be5-c9f7c17058c3)

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbqJ6MbNRbK9D2et1_%2FSlider.png?alt=media\&token=b418d2b6-6852-45de-bf91-6f80d9f48e6b)

**Slider With Input Field**

The label providing a short description of the requested input can be placed above the slider. To enable easier data input, the input field can be placed next to the slider.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbpzKYdIdzSlBjUfn3%2FSlider%20with%20input%20fields.png?alt=media\&token=9d33c8e1-228a-425b-a176-43e484704f5e)

### Behaviour

* Ensure that everything stays in sync: the cursor’s shape, the hover effects, the position of the handle, the responsive to clicking and dragging, the change in values, the change of states inside and outside the slider area.
* Allow tab to thumb control and arrow keys to move it

### Best Practices

* Use slider when the user needs to select numeric value, percentages or other types of discrete data
* Present the selected value by displaying the text label below slider handle
* If the user needs to enter exact numerical value, use the input field rather than slider
* If the interface accepts only a few input options, then a set of radio buttons, checkboxes or predefined options might work better
* Allow users to jump to any value on the track

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbq3KOMDJ8DLRf--qE%2FSlider%20do's%20and%20don'ts.png?alt=media\&token=7bbe5809-2c75-431f-b187-1f3f1833fcf6)

### Sizing

Slider comes in one size, and the width can be adjusted to fit the container it is placed within. The track height is 4px, and handle dimensions 24px × 24px, with padding 2px.

### States

* Slider statuses follow the same state styling principles as the checkbox or radio component
* Enabled track background is Grey L80, and disabled status L60
* Enabled background colour is Sky Blue Base
* Validation state is Red Base

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbq86KAa8o72w8nNzo%2FSlider%20states.png?alt=media\&token=0fc03788-9279-437f-b112-160e6652b413)


---

# 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://hinahirani.gitbook.io/ui-guide/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.