Slider
A labelled range slider.
A value on a range
Slider picks a number between min and max in steps of step. .fnc { … } runs with the new value while it is dragged, so what depends on it follows the thumb.
Page(
.name(Hours)
.route('/')
var int hours = 2
Scaffold(
.config(color: canvas)
.body(
Column(
.config(w: 320, gap: 12, padding: all(24))
Slider(
.config(label: 'Hours', max: 8, min: 1, step: 1, value: hours)
.fnc { hours = value }
)
Text(
.config(size: 18, weight: semibold)
.obj('$hours hours · €${hours * 24}')
)
Container(
.config(w: hours * 40, h: 10, color: accent, cornerRadius: 999)
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
value | num | Current value. | |
min | num | 0 | Minimum. |
max | num | 100 | Maximum. |
step | num | 1 | Step. |
label | txt | Label. | |
disabled | bool | Disabled. | |
w (width) | len | fill | hug | Width: a length, fill (share the remaining space) or hug (fit content, default). | |
h (height) | len | fill | hug | Height: a length, fill or hug (default). | |
size (s) | size | Width and height together: size: 200 or size: (200, 120). | |
minW (minWidth) | len | Minimum width. | |
maxW (maxWidth) | len | Maximum width. | |
minH (minHeight) | len | Minimum height. | |
maxH (maxHeight) | len | Maximum height. | |
aspect (aspectRatio) | num | Aspect ratio (width / height), e.g. 16/9. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Events
.fnc runs on change. .on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.