slider

binds state

Picks a number in a range by dragging a handle, or with the arrow keys. Good for prices, distances and amounts.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

min

max

300

step

Props

"text"textAn optional label above the slider. Show the value with an {expression}.optional

bindstateThe number state this slider reads and writes.required

minnumberSmallest value (default 0).0

maxnumberLargest value (default 100).100

stepnumberThe value moves in steps of this size (default 1).1

onactionActions to run after the user lets go, or after each arrow key, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for slider, generated from the same definition.

  slider "<text>"  — Picks a number in a range by dragging a handle, or with the arrow keys. Good for prices, distances and amounts.
    "<text>"  An optional label above the slider. Show the value with an {expression}.
    bind=<state, required>  The number state this slider reads and writes.
    min=<number>  Smallest value (default 0).
    max=<number>  Largest value (default 100).
    step=<number>  The value moves in steps of this size (default 1).
    on=<action>  Actions to run after the user lets go, or after each arrow key, e.g. emit:changed. Separate several with ;
    example:
      state maxPrice=120
      slider "Up to ${maxPrice}" bind=maxPrice min=20 max=300 step=10

More input

button link check switch radio select date-picker stepper input segmented menu menu-item

All input elements on one page →