Sliders
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
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Sliders
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
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.