https://framer.com/m/Slider-HfKAyA.js#Slider
Slider
Slider picks a number, or a pair of numbers, by dragging. Range, bounds, step, direction, track and thumb are all props; the colours are left empty so the theme supplies them.
Examples
Live specimens for every control the component exposes.
Default
One thumb on a 0–100 scale, sitting at 50.
Single and range
range turns the second thumb on; value becomes the start and end becomes the finish.
range false · value 40
range true · value 25 · end 75
Scale
min, max and step decide what the drag can land on. A coarse step turns the track into discrete stops.
0–100 · step 1
0–100 · step 25
0–10 · step 1
Direction
vertical rotates the whole control; the thumb still tracks from the low end to the high one.
horizontal
vertical
Label and value
label prints the text, showValue prints the number beside it, and side places the pair around the track.
label off
label on · side top
showValue on
Track and thumb
trackH sets the bar, thumbSize the handle. The two move independently, so a thin track can still carry a large thumb.
trackH 2 · thumbSize 14
trackH 4 · thumbSize 20
trackH 10 · thumbSize 28
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for Slider
A number is easier to feel than to type.
The range has meaningful bounds the user should see.
Two ends of a span need setting at once.
Live feedback while dragging matters more than precision.
Reach for something else
The value must be exact — use a number field.
The input is not numeric.
The thumb needs custom content beyond colour and size.
Io — UI Basics
Every slider above is a live Slider instance. Colour, type and radius resolve from the project theme tokens — the colour props are deliberately left empty.