Slider blocks

Sliders set a value by position on a track: you drag a knob, and where it lands is the number.

Get Pro to installPro16 blocksReact, Vue and Figma

BudgetMonthly rent, before bills

$1,500to$2,500157 of 342 homes

Min$Max$

Showing $1,500 – $2,500

Every block in the set#

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

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

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

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

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

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

A rating or level with a handful of fixed positions

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

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

Continuous amounts: volume, brightness, intensity

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

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

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

Choosing several options and weighing each: where the hours go

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

A graded setting that stays folded until it is needed

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.