State the meaning and unit
If precise input is required, there should be an additional number box instead of just dragging.
Slider Design system
Helps select a controlled value or range of values.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
State the meaning and unit
“Budget, thousand dong”: range 0–500, currently selected value 250.
Variants and use cases
Bars and pulls
Keep tracks, selected sections, and handles easy to spot on light and dark backgrounds.
Try the lowest and highest values; The handle is not cut at the edge.
Example The volume bar has a clear knob and percentage unit labels.
Labels and limits
Indicate the value meaning, unit and minimum/maximum mark before dragging.
Read only current value; need to understand whether it is price, distance or capacity.
Example The distance filter reads “Within a radius of 5 km”.
050100
Operate with pull handle
Supports dragging, arrow keys and travel keys to appropriate limits.
Only use the keyboard to select the correct value; The increase or decrease step must be consistent.
Example Arrows increase by 1% each time; Home is set to 0%.
Allow a value to be entered instead of dragging.
Value at drag position
If displaying a value near a handle, keep it in view and do not cover the active item.
Drag to the top edge of the mobile; The value label does not extend beyond the viewport.
Example The “75%” bubble is located above the pull handle and is still visible on the right edge.
How to enter numbers correctly
Add input boxes when dragging is not precise enough for the required data.
Enter a number outside the limit and then correct it; slider and input box must have the same valid value.
Example The maximum price can be typed 250000 instead of trying to drag it to the correct mark.