Interaction methods
Users can control the slider through multiple methods:
- Mouse/touch — Drag the handle along the track
- Keyboard — Use the arrow keys to adjust the value
- Input field — Type a specific value directly
- Track click — Click on the track to move the handle to that position (optional)
The input field and slider components are linked so that:
- Changing the input field value adjusts the slider position
- Moving the slider handle updates the input field value
It is important to make sure that focus states appear in the correct order too.
Annotation of how the focus state is first on the input (1) and then the handle (2)
Stepped increments
Sliders can be set to move in stepped increments rather than continuously. This is useful when:
- Values should align to specific amounts (e.g., multiples of 10, 50, or 100)
- The range has logical divisions
- Precision beyond certain intervals is not meaningful
Example: A price slider might increment by £100, so values would be £100, £200, £300, etc., rather than allowing £147.
Interactive area
Annotation of the interactive area
Ensure the slider handle and track have sufficient interactive area for easy use. The handle should be large enough to be comfortable to grab, and the track should respond to clicks along its length.
Validation
Example of helper text and validation being used together
Show a validation message when the data entered by the user exceeds the maximum value set in the max attribute or falls below the minimum value set in the min attribute.
Validation guidelines:
- Display error messages below the slider
- Prevent the handle from moving beyond min/max bounds
- Validate input field entries and show clear error messages
- Use aria-invalid="true" to announce errors to screen readers
Example error messages:
- "Value must be between 0 and 1000"
- "Please enter a value no greater than 500"