Introduction

The Slider component is used for selecting a range of values from a continuous range of values.

Slider Colors

The table below provides the color specifications: | Color | Hex code | | --------- | ------- | | Primary-1 | #FFB42A | | Neutral-1 | #262626 | | Neutral-3 | #FFFFFF |

Slider States

The Slider component has several states, depending on the user's interaction with it | State | Description | | -------- | ---------------------------------------------------------------------- | | Default | The initial state of the slider component | | Hover | When the user hovers the mouse pointer over the slider component | | Pressed | When the user clicks on the slider component | | Disabled | When the Input Field is not available for interaction |

indreka-slider component

The <indreka-slider></indreka-slider> component having the following property:

1. label having type of string.
2. disabled having type of boolean.
3. min having type of string.
4. max having type of string.
5. step having type of number.
6. value having type of number.
7. fromValue having type of number.
8. toValue having type of number.
9. variationMode having type of boolean.
10. isDragging having type of boolean.

use

<indreka-slider></indreka-slider>

we can pass attributes inside like:

1. label <indreka-slider label="labelName"></indreka-slider>

-- This will set the label for the slider component and also update the aria-label.

2. disabled <indreka-slider disabled></indreka-slider>

-- This will disable the slider preventing the user to perform any action the slider component.

3. min <indreka-slider min="value"></indreka-slider>

-- The min property is to set the min value for the slider component.

4. max <indreka-slider max="value"></indreka-slider>

-- The max property is to set the max value for the slider component.

5. step <indreka-slider step="value"></indreka-slider>

-- The step property is to set the step value for the slider component.

6. fromValue <indreka-slider fromValue="value"></indreka-slider>

-- Set the fromValue property as default "30" to display the slider thumb in variation slider.

7. toValue <indreka-slider toValue="value"></indreka-slider>

-- Set the toValue property as default "50" to display the slider thumb in variation slider.

8. variationMode <indreka-slider variationMode="false"></indreka-slider>

-- Set the variationMode property as false to display the normal slider.

8. variationMode <indreka-slider variationMode="true"></indreka-slider>

-- Set the variationMode property as true to display the variation slider.

styles The max-width and min-width of the input field is given as 200px and 600px respectively. For the custom component the styles cannot be changed.

To change the width of the slider . It can be wrapped between the div tag and it can be changed by giving width accordingly between 200px and 600px.