Sliders
Sliders set a value by position on a track: you drag a knob, and where it lands is the number. That makes them right when the reader is judging magnitude (loud enough, bright enough, cheap enough) and wrong when a specific figure is the point. The seven blocks here run from a single continuous track through stepped ones, where cuts in the track are real stops the knob snaps to, up to a two-handle range paired with typed inputs.
What catches teams out is that a slider's precision is its pixel width. Across a small range, a short track gives several pixels per step and feels exact. Across a range of tens of thousands it gives a value the same person cannot land on twice in a row. Where the figure ever has to be exact, put a number field beside the track and keep the two in sync, so dragging is the rough pass and typing is the correction.
Budget range
Best for
Price and quantity filters: a bounded range with exact numbers on hand
Anatomy
Grey list header · two-handle Range Slider · two Text Inputs joined by a dash · drawer footer with the live range
Budget
Drag the handles or type an amount.
Skill levels
Best for
Rating several things on one scale: skills, priorities, preferences
Anatomy
Dark header · Drop Down Sliders as an accordion, the open one with a five-stop slider · stepper footer
Rate your skills
Pick an area, then set your level.
Stepped slider
Best for
A rating or level with a handful of fixed positions
Anatomy
32px pill track · brand fill · five cuts as stops · 24px round knob
Gradient slider
Best for
Continuous amounts: volume, brightness, intensity
Anatomy
32px pill track · brand gradient fill · 24px knob with the drag grid
Paddle slider
Best for
Coarse positions that want arrow buttons as well as a drag: zoom, pages, stages
Anatomy
12px track · 16px fill · 52px white paddle with step arrows · three cuts
Option slider
Best for
Choosing an option and grading it in one control: a pick that then asks how much
Anatomy
Radio · title that settles from 20px to 18px once picked · description · chevron · Low – High five-stop slider when open
Drop-down slider
Best for
A graded setting that stays folded until it is needed
Anatomy
Card with 1.5px border, strong when open · title and level · chevron · five-stop pill slider
Using Sliders
Reach for it when
- Setting volume, brightness or opacity, where the reader judges the result rather than the number
- Filtering a catalogue by a price or quantity band with two handles
- Grading several things on one short fixed scale: skill level, priority, effort
- Zooming or scrubbing, where a drag finds the area and arrow steps do the rest
Reach for something else when
- An exact figure the reader already has in mind, like a salary or an invoice total: use a number input rather than making them hunt for a value they could type
- More than a handful of discrete choices; past a few stops the track stops reading as a scale, and a segmented control or a select names each option instead
- A value with no meaningful upper bound: a slider needs a defined maximum, so reach for a number field with validation
Where it shows up
Price range filters
A catalogue narrows to a band. Two handles set the floor and the ceiling, a pair of typed inputs keeps the exact figures to hand, and the footer reads the range back before it is applied.
Playback and volume
Media controls where the reader judges the result rather than the number. Position on the track is the feedback, the track is one pointer surface so a press anywhere jumps the knob there, and arrow keys handle the last steps.
Self-assessment forms
Rating several things on one scale: skills, priorities, effort. Each row folds shut until it is opened, so a long list stays scannable, and every row grades against the same handful of stops rather than a free number.
Editor settings
Zoom, opacity and effect strength in a design tool. A paddle with step arrows gives coarse positions the drag can find and the arrows can correct, which suits a value the reader tunes by eye many times a session.
Questions
Should a slider show its current value as text?
Yes, next to the control. A knob's position is a rough reading and the fill is hardest to judge near the ends, where the difference between the last few steps matters most. Assistive technology announces the number from the control itself; everyone else needs it drawn. Put it in the label or immediately after the track, and include the unit.
How does a slider work with a keyboard?
A slider takes focus like any other input. Arrow keys move it by one step, Page Up and Page Down move it in larger jumps, and Home and End go to the minimum and the maximum. A two-handle range has two focusable knobs, and each needs its own label: otherwise a screen reader announces the same thing twice and the reader cannot tell which end they are moving.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPSliders
Sliders set a value by position on a track: you drag a knob, and where it lands is the number. That makes them right when the reader is judging magnitude (loud enough, bright enough, cheap enough) and wrong when a specific figure is the point. The seven blocks here run from a single continuous track through stepped ones, where cuts in the track are real stops the knob snaps to, up to a two-handle range paired with typed inputs.
What catches teams out is that a slider's precision is its pixel width. Across a small range, a short track gives several pixels per step and feels exact. Across a range of tens of thousands it gives a value the same person cannot land on twice in a row. Where the figure ever has to be exact, put a number field beside the track and keep the two in sync, so dragging is the rough pass and typing is the correction.
Budget range
Best for
Price and quantity filters: a bounded range with exact numbers on hand
Anatomy
Grey list header · two-handle Range Slider · two Text Inputs joined by a dash · drawer footer with the live range
Budget
Drag the handles or type an amount.
Skill levels
Best for
Rating several things on one scale: skills, priorities, preferences
Anatomy
Dark header · Drop Down Sliders as an accordion, the open one with a five-stop slider · stepper footer
Rate your skills
Pick an area, then set your level.
Stepped slider
Best for
A rating or level with a handful of fixed positions
Anatomy
32px pill track · brand fill · five cuts as stops · 24px round knob
Gradient slider
Best for
Continuous amounts: volume, brightness, intensity
Anatomy
32px pill track · brand gradient fill · 24px knob with the drag grid
Paddle slider
Best for
Coarse positions that want arrow buttons as well as a drag: zoom, pages, stages
Anatomy
12px track · 16px fill · 52px white paddle with step arrows · three cuts
Option slider
Best for
Choosing an option and grading it in one control: a pick that then asks how much
Anatomy
Radio · title that settles from 20px to 18px once picked · description · chevron · Low – High five-stop slider when open
Drop-down slider
Best for
A graded setting that stays folded until it is needed
Anatomy
Card with 1.5px border, strong when open · title and level · chevron · five-stop pill slider
Using Sliders
Reach for it when
- Setting volume, brightness or opacity, where the reader judges the result rather than the number
- Filtering a catalogue by a price or quantity band with two handles
- Grading several things on one short fixed scale: skill level, priority, effort
- Zooming or scrubbing, where a drag finds the area and arrow steps do the rest
Reach for something else when
- An exact figure the reader already has in mind, like a salary or an invoice total: use a number input rather than making them hunt for a value they could type
- More than a handful of discrete choices; past a few stops the track stops reading as a scale, and a segmented control or a select names each option instead
- A value with no meaningful upper bound: a slider needs a defined maximum, so reach for a number field with validation
Where it shows up
Price range filters
A catalogue narrows to a band. Two handles set the floor and the ceiling, a pair of typed inputs keeps the exact figures to hand, and the footer reads the range back before it is applied.
Playback and volume
Media controls where the reader judges the result rather than the number. Position on the track is the feedback, the track is one pointer surface so a press anywhere jumps the knob there, and arrow keys handle the last steps.
Self-assessment forms
Rating several things on one scale: skills, priorities, effort. Each row folds shut until it is opened, so a long list stays scannable, and every row grades against the same handful of stops rather than a free number.
Editor settings
Zoom, opacity and effect strength in a design tool. A paddle with step arrows gives coarse positions the drag can find and the arrows can correct, which suits a value the reader tunes by eye many times a session.
Questions
Should a slider show its current value as text?
Yes, next to the control. A knob's position is a rough reading and the fill is hardest to judge near the ends, where the difference between the last few steps matters most. Assistive technology announces the number from the control itself; everyone else needs it drawn. Put it in the label or immediately after the track, and include the unit.
How does a slider work with a keyboard?
A slider takes focus like any other input. Arrow keys move it by one step, Page Up and Page Down move it in larger jumps, and Home and End go to the minimum and the maximum. A two-handle range has two focusable knobs, and each needs its own label: otherwise a screen reader announces the same thing twice and the reader cannot tell which end they are moving.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
