Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Slider
The Slider is a component used for picking a value between a bound.
Slider Props
| Name | Use | Type | Definition |
| max | optional | number | Maximum bound for the slider. |
| min | optional | number | Minimum bound for the slider. |
| defaultValue | optional | DefProps | number | Default value set before initialization, for a single slider it can be a number, and for a double slider it should be an object with the min and max values. |
| label | optional | { left: string | number; right: string | number } | Contains the left and right labels. |
| double | optional | boolean | Determines whether to render a double slider or not. |
| className | optional | string | Set different classes for SelectInput component |
| disabled | optional | boolean | A boolean to disable the slider. |
| tooltip | optional | boolean | Indicates whether to show a tooltip or not. |
| onChange | optional | (...values: any) => void | A function that is called when the slider value changes. The function receives the new slider value(s). |
| tooltipText | optional | TTProps | string | number | A string, a number or an object that defines the tooltip content. For a single slider it can be a string or a number, and for a double slider, it should be an object with the min and max values. |
| others | optional | any | Receives any additional props that are not defined by the component. |
Examples
Single slider
Simple slider example with only label prop passed.
Single slider with label, tooltip, min and max
Single slider example with with label, tooltip, min and max props passed.
Disabled single slider
Disabled single slider example by adding disabled prop.
Simple Double Slider
Simple double slider example by adding double prop.
Double Slider with label, tooltip, min and max
Complex double slider example by adding label, tooltip, min and max props.
Disabled double slider
Complex double slider example by adding disabled props.