indreka-slider v1.0.0
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.
7 months ago