Slider
Sliders allow users to select a single value or a range of values from a predefined interval.
Quick Start
Use a Slider when users need to select a value within a range.
1import { Slider } from "@ecos/ui"; 2 3<Slider 4 label="Volume" 5 defaultValue={[35]} 6/>
Controlled Usage
Control the slider externally using the value and onValueChange props.
1const [value, setValue] = useState([35]); 2 3<Slider 4 label="Volume" 5 value={value} 6 onValueChange={setValue} 7/>
Labels
Provide a label to describe the purpose of the slider.
1<Slider 2 label="Volume" 3 defaultValue={[35]} 4/>
Help Text
Use helpText to provide additional guidance or context.
Adjust the output volume level.
1<Slider 2 label="Volume" 3 helpText="Adjust the output volume level." 4 defaultValue={[35]} 5/>
Required Fields
Use the required prop to indicate a mandatory field.
1<Slider 2 label="Volume" 3 required 4 defaultValue={[35]} 5/>
Slider States
Use the state prop to communicate validation and feedback states.
Please select a value.
Value accepted.
1<Slider 2 label="Volume" 3 state="error" 4 helpText="Please select a value." 5 defaultValue={[35]} 6/> 7 8<Slider 9 label="Volume" 10 state="success" 11 helpText="Value accepted." 12 defaultValue={[35]} 13/>
Value Tooltip
Hover or focus a slider thumb to display the current value.
1<Slider 2 label="Volume" 3 defaultValue={[35]} 4/>
Custom Range
Configure the available value range using the min and max props.
1<Slider 2 label="Price" 3 min={0} 4 max={1000} 5 defaultValue={[250]} 6/>
Step Intervals
Use the step prop to control the increment between selectable values.
1<Slider 2 label="Opacity" 3 min={0} 4 max={100} 5 step={10} 6 defaultValue={[40]} 7/>
Range Slider
Provide multiple values to render multiple thumbs and select a range.
1<Slider 2 label="Price Range" 3 defaultValue={[25, 75]} 4/>
Disabled State
Disable the slider when interaction is unavailable.
1<Slider 2 label="Volume" 3 disabled 4 defaultValue={[35]} 5/>
Vertical Orientation
Set the orientation to vertical when required by the layout.
1<Slider 2 label="Volume" 3 orientation="vertical" 4 defaultValue={[35]} 5/>
API Reference
Property | Type | Default | Description |
|---|---|---|---|
| label | string | - | Label displayed above the slider. |
| helpText | string | - | Additional descriptive text displayed below the slider. |
| state | "default" | "error" | "success" | "default" | Controls the validation state styling applied to the label and help text. |
| required | boolean | false | Displays a required indicator alongside the label. |
| value | number[] | - | Controls the current slider value or values. Supplying multiple values creates a range slider. |
| defaultValue | number[] | [min] | Sets the initial value or values when the slider is uncontrolled. Supplying multiple values creates a range slider. |
| min | number | 0 | The minimum value allowed. |
| max | number | 100 | The maximum value allowed. |
| step | number | 1 | The interval between selectable values. |
| orientation | "horizontal" | "vertical" | "horizontal" | Determines the slider orientation. |
| disabled | boolean | false | Prevents user interaction. |
| onValueChange | (value: number[]) => void | - | Called whenever the slider value changes. |
| onValueCommit | (value: number[]) => void | - | Called when a value change is committed. |
| className | string | - | Additional classes applied to the slider root element. |
Visual Reference
Configuration | Preview |
|---|---|
| Default | |
| With Help Text | Adjust the output volume level. |
| Error State | Please select a value. |
| Success State | Value accepted. |
| Required | |
| Range Slider | |
| Stepped | |
| Custom Range | |
| Disabled | |
| Vertical |