Sign In Get all access

Stepped slider, costs

Each stop says what it costs: Stops that change more than a number: what you get at each level.

Get Pro to installPro16 blocksReact, Vue and Figma

Difficulty

Medium3 of 5

Questions10

Time each30 s

HintsOn

Mixed topics; hints cost you a point.

More in Slider blocks#

Budget range

Price and quantity filters: a bounded range with exact numbers on hand

Budget range, histogram

You can see what the range catches: Price filters where the market matters: how many homes sit at each price

Budget range, sentence

A sentence you can drag: A range read aloud: the amounts sit in a sentence and the track's fill moves the whole range

Skill levels

Rating several things on one scale: skills, priorities, preferences

Skill levels, all open

Every skill open at once: Rating a short list in one pass, with the result in view

Skill levels, interview

A short interview, one skill per step: Asking about skills one at a time, with a sentence that says what each level means

Stepped slider

A rating or level with a handful of fixed positions

Stepped slider, staircase

The level is a staircase: A level that should read as a climb: difficulty, intensity, tiers

Stepped slider, costs

Each stop says what it costs: Stops that change more than a number: what you get at each level

Gradient slider

Continuous amounts: volume, brightness, intensity

Gradient slider, value on knob

The number rides on the knob: Continuous amounts where the figure should stay under your thumb

Gradient slider, faders

Two faders, like a control centre: Several continuous settings side by side: display, sound, mix

Paddle slider

Coarse positions that want buttons as well as a drag: zoom, pages, stages

Option slider

Choosing several options and weighing each: where the hours go

Option slider, per option

One slider remembers each option: Grading one option at a time with a single control that remembers each grade

Drop-down slider

A graded setting that stays folded until it is needed

When to use#

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

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans