Overview
The Slider component is a versatile UI element that allows users to select a value from a predefined range. It is commonly used for adjusting settings such as volume, brightness, or any other numerical value that requires user input. The slider provides a visual representation of the range and allows for precise adjustments.
Modes
The Slider component supports various modes to enhance user experience:
- Continuous: The slider allows users to select any value within the range, providing a smooth and continuous adjustment experience.
- Discrete: The slider allows users to select only specific values within the range, often used for settings that require predefined steps (e.g., volume levels).
API Reference
Slider
A slider component for selecting numeric values within a specified range.
Props
| Name | Type | Default | Description |
|---|---|---|---|
min | number | 0 | The minimum value of the slider |
max | number | 100 | The maximum value of the slider |
step | number | "any" | 10 | The stepping interval for the slider. Use "any" for continuous values |
mode | "continuous" | "discrete" | "continuous" | The slider mode - continuous for smooth values, discrete for stepped values |
disabled | boolean | false | Whether the slider is disabled |
showValue | boolean | true | Whether to display the current value |
Inherited Props
The Slider component accepts all standard HTML input[type="range"] element props.
Notes
- When using
mode="discrete", thestepprop is required and must be a number - The slider includes visual tick marks when in discrete mode
- The component handles both controlled and uncontrolled usage patterns