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:
-
label
having type of string. -
disabled
having type of boolean. -
min
having type of string. -
max
having type of string. -
step
having type of number. -
value
having type of number. -
fromValue
having type of number. -
toValue
having type of number. -
variationMode
having type of boolean. -
isDragging
having type of boolean.
use
<indreka-slider></indreka-slider>
we can pass attributes inside like:
-
label
<indreka-slider label="labelName"></indreka-slider>
-- This will set the label for the slider component and also update the aria-label.
-
disabled
<indreka-slider disabled></indreka-slider>
-- This will disable the slider preventing the user to perform any action the slider component.
-
min
<indreka-slider min="value"></indreka-slider>
-- The min property is to set the min value for the slider component.
-
max
<indreka-slider max="value"></indreka-slider>
-- The max property is to set the max value for the slider component.
-
step
<indreka-slider step="value"></indreka-slider>
-- The step property is to set the step value for the slider component.
-
fromValue
<indreka-slider fromValue="value"></indreka-slider>
-- Set the fromValue property as default "30" to display the slider thumb in variation slider.
-
toValue
<indreka-slider toValue="value"></indreka-slider>
-- Set the toValue property as default "50" to display the slider thumb in variation slider.
-
variationMode
<indreka-slider variationMode="false"></indreka-slider>
-- Set the variationMode property as false to display the normal slider.
-
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.