Input Slider

The Input Slider component provides an interactive slider control with support for continuous and discrete values, horizontal/vertical orientations, and rich customization options.

Basic usage

The Input Slider implements ControlValueAccessor for form integration and supports both continuous and discrete value selection.

Component anatomy

Value Types

Configure value handling through:

• Continuous mode: Use minValue, maxValue, and step Inputs
• Discrete mode: Use values Input for predefined options
• Custom value formatting with valueLabelFn
• Tooltip values with valueTooltipFn
• ARIA text with ariaValueTextFn

Prefilled value

Custom step

Discrete values

Orientation

Control slider layout with orientation Input:

• Horizontal (default): Left-to-right slider
• Vertical: Bottom-to-top slider
• RTL support for horizontal mode
• Automatic layout adaptation

Horizontal

Vertical

Track Labels

Manage value labels using:

• showTrackLabels Input to toggle visibility
• trackLabelsPosition Input for placement (before/after)
• Custom label formatting
• Automatic spacing and alignment
• RTL support

Hiding the track labels

Setting the track labels position

Customizing the track labels

Track Interaction

Enhanced track interaction with:

• showTooltipOnTrack Input for hover feedback
• Click-to-position support
• Smooth dragging
• Step snapping
• Progress visualization

Keyboard Control

Comprehensive keyboard support:

• Arrow keys for value adjustment
• Custom step sizes
• Direction-aware controls
• Focus management
• Optional disable with disableKeyboardInteractions

Negative Theme

Enable dark theme using the negative Input, affecting:

• Track colors
• Handle colors
• Label colors
• Focus indicators
• Tooltip appearance

Accessibility

ARIA Implementation

Complete ARIA support:

• Slider role
• Value range description
• Current value updates
• State changes
• Orientation indication

Keyboard Navigation

Full keyboard control:

• Left/Right arrows for horizontal
• Up/Down arrows for vertical
• Step-based movement
• Focus management
• RTL adaptation

Screen Reader Support

Enhanced value communication:

• Current value announcements
• Range context
• Change notifications
• Orientation information
• Error states

Best Practices for Developers

1. Value Configuration DEMO HERE

2. Label Implementation DEMO HERE

3. Keyboard Support DEMO HERE