Dowe

FORM

Slider

Sliders let people choose a numeric value from a clear, bounded range.

PLAYGROUND

Adjust live numeric values

Each Slider reads and writes a numeric Signal. The label row always reflects the current value unless hideLabel is enabled.

Volume0
Playback speed1
Layer opacity0
dowe
signal volume value:40

Slider bind:volume min:0 max:100 step:5 label:"Volume" name:"volume" scheme:"warning" size:"lg"

RANGE AND STEP

Make valid values obvious

min and max define the inclusive range. step controls the increments available while dragging or using a keyboard.

Seats25
Temperature offset18
dowe
Slider value:25 min:0 max:50 step:5 label:"Seats" name:"seats" scheme:"primary"
Slider value:18 min:-24 max:24 step:1 label:"Temperature offset" name:"temperature-offset" scheme:"danger"

SCHEMES

One accent, one progress track

scheme colors the active track and thumb while the remaining track stays muted for contrast.

Primary65
Secondary65
Tertiary65
Muted65
Success65
Info65
Warning65
Danger65

SIZES

Three touch densities

size adjusts the track and thumb together, preserving the same range and interaction contract.

Small45
Medium45
Large45

LABELS

Show the value when context needs it

The default label row pairs the field label with the current number. hideLabel removes that row when surrounding content already supplies the context.

Opacity72
dowe
Slider value:72 min:0 max:100 step:1 label:"Opacity" scheme:"success"
Slider value:72 min:0 max:100 step:1 hideLabel:true scheme:"success"

BEHAVIOR

One range contract, every target

Dowe lowers the same bounded numeric control to web, Android, and iOS while keeping range, stepping, accent color, and label behavior aligned.

BINDING

Numeric Signals

bind accepts numeric Signal paths only, so changes stay typed without running user JavaScript.

VALIDATION

Bounded values

max must exceed min, and value must remain inside the declared range. step must be positive.

TARGETS

Native interaction

Web, SwiftUI, and Compose each provide native range interaction from the same authored component.

API

Props

Slider also accepts the applicable common spacing, sizing, font, visibility, and accessibility props.

Prop
Type
Default

No data

There are no records to display