The Slider component will provide a way for users to select a value or a range of values within a specified range. It will be fully accessible, customizable, and integrate seamlessly with other form components in the Capybara UI library.
2. Component Structure
The Slider component will consist of:
Slider: The main wrapper component
SliderTrack: The base line of the slider
SliderThumb: The draggable handle(s) to select value(s)
SliderMarks: Optional marks to represent predefined values
3. Props
3.1 Slider Props
value: number | [number, number] - Current value(s) of the slider
onChange: (value: number | [number, number]) => void - Callback when value changes
min: number (default: 0) - Minimum value of the range
max: number (default: 100) - Maximum value of the range
step: number (default: 1) - Step interval
disabled: boolean - Disables the slider when true
orientation: 'horizontal' | 'vertical' (default: 'horizontal')
marks: boolean | { value: number, label: string }[] - Show marks on the slider
label: string - Accessible label for the slider
valueLabelDisplay: 'on' | 'auto' | 'off' (default: 'off') - Show the current value label
size: 'small' | 'medium' | 'large' (default: 'medium')
color: string - Custom color for the slider
className: string - Additional CSS class for styling
4. State Management
The Slider will be a controlled component. It will manage internal state for:
isDragging: boolean - Whether the thumb is currently being dragged
isFocused: boolean - Whether the slider is currently focused
5. Styling
We'll use CSS modules for styling. Key styling considerations include:
Smooth animations for value changes and dragging
Different appearances for various states (default, hover, focus, disabled)
Responsive design for both horizontal and vertical orientations
Customizable colors using CSS variables
Consistent sizing with other form components
6. Accessibility Features
Keyboard navigation (arrow keys to change value, Home/End to jump to min/max)
Proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)
Clear focus indicators
Screen reader support for current value and range
7. Behavior
Click on track to jump to that value
Drag thumb to change value smoothly
Optional snap-to-step behavior
Support for both single value and range selection
1. Overview
The Slider component will provide a way for users to select a value or a range of values within a specified range. It will be fully accessible, customizable, and integrate seamlessly with other form components in the Capybara UI library.
2. Component Structure
The Slider component will consist of:
Slider: The main wrapper component SliderTrack: The base line of the slider SliderThumb: The draggable handle(s) to select value(s) SliderMarks: Optional marks to represent predefined values
3. Props
3.1 Slider Props
value: number | [number, number] - Current value(s) of the slider onChange: (value: number | [number, number]) => void - Callback when value changes min: number (default: 0) - Minimum value of the range max: number (default: 100) - Maximum value of the range step: number (default: 1) - Step interval disabled: boolean - Disables the slider when true orientation: 'horizontal' | 'vertical' (default: 'horizontal') marks: boolean | { value: number, label: string }[] - Show marks on the slider label: string - Accessible label for the slider valueLabelDisplay: 'on' | 'auto' | 'off' (default: 'off') - Show the current value label size: 'small' | 'medium' | 'large' (default: 'medium') color: string - Custom color for the slider className: string - Additional CSS class for styling
4. State Management
The Slider will be a controlled component. It will manage internal state for:
isDragging: boolean - Whether the thumb is currently being dragged isFocused: boolean - Whether the slider is currently focused
5. Styling
We'll use CSS modules for styling. Key styling considerations include:
Smooth animations for value changes and dragging Different appearances for various states (default, hover, focus, disabled) Responsive design for both horizontal and vertical orientations Customizable colors using CSS variables Consistent sizing with other form components
6. Accessibility Features
Keyboard navigation (arrow keys to change value, Home/End to jump to min/max) Proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow) Clear focus indicators Screen reader support for current value and range
7. Behavior
Click on track to jump to that value Drag thumb to change value smoothly Optional snap-to-step behavior Support for both single value and range selection