Input form control

Slider

<ut-slider>

A range slider for numbers with a value bubble, mark labels such as Low, Medium and High, a unit or currency prefix and an optional exact-entry box.

Officialv1.0.0 Self-contained

Download .utpkg 16 KB Install in your workspace

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

How confident are you?

Value the form receives

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

A slider for any number that sits on a scale: a confidence or risk score from 0 to 100, a budget from $0 to $5,000, a discount percentage, a priority from 1 to 10. Set the minimum, maximum and step, add a prefix ($) or suffix (%, kg), and spread labels such as Low, Medium and High under the track. A small number box beside the slider lets people type an exact value when dragging is too coarse.

It is a native range input underneath, so keyboards and screen readers work as people expect: the arrow keys move one step, Page Up and Page Down move further, Home and End jump to the ends, and the value is announced with its unit and mark ("100%, High"). The thumb and track are large enough for touch.

A starting position can be shown without storing it: the field stays empty (and a Required field stays unanswered) until the person moves the slider or presses Enter to accept the start, so you can tell a deliberate answer from an untouched default.

Good for

Confidence or risk score from 0 to 100 on an assessment
Budget or spend limit from $0 to $5,000 on a request form
Discount or completion percentage on an approval step

After installing

Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom.
Drag Slider onto a form, then set the minimum, maximum and step, the prefix or suffix, and (optionally) the mark labels and starting position in the properties panel.

Reference

Value, properties and accessibility

Value

number

Stored as the field's value (type number), validated by the server against the control's schema; the control also reports its own validity while people type.

Read-only views (completed tasks, mobile, emails) show {{value}}.

Keyboard and screen readers

Role: slider, named by the field label.

Tab to the slider; Left / Right (or Up / Down) move one step, Page Up / Page Down move further, Home / End jump to the minimum / maximum. Enter or Space accepts the starting position while the field is still empty. With the number box, Tab again to type an exact value.

Properties (set in the form designer)
Property	Type	Default	What it does
Minimum `min`	number	0
Maximum `max`	number	100
Step `step`	number 0.000001–…	1	The slider moves in steps of this size (1, 5, 0.5, …).
Prefix `value_prefix`	string	—	Shown before the value, e.g. $.
Suffix (unit) `value_suffix`	string	—	Shown after the value, e.g. % or kg.
Show value bubble `show_value`	boolean	yes
Mark labels `marks`	list	—	Labels spread evenly under the track, lowest first (e.g. Low, Medium, High). Without marks the minimum and maximum are shown.
Show number box `show_input`	boolean	no	A small number box beside the slider for typing an exact value.
Starting position `default_value`	number	—	Where the slider starts. The field stays empty until the person moves it (or presses Enter).

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on Slider. Or download form-control-slider-1.0.0.utpkg and drag it onto Automations → Packages.
The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
Drag the control onto a form in the designer and set its properties.

With the CLI

shell

curl -fLO https://usertasks.com/gallery/form-control-slider-1.0.0.utpkg
usertasks packages inspect form-control-slider-1.0.0.utpkg
usertasks packages install form-control-slider-1.0.0.utpkg

Verify the download

File SHA-256: 91efc9ac4633ab75662ae9a9d0b3e7ab63bbe4e599952d588c0356affc54fc87
Package checksum (what is signed): sha256:de3a6a6cfe1f3b38cfb6c6913cdb3d4319179bb77c233f5a2988db18cad1048d
<ut-slider> module SHA-256: 3cbeabfb61838f3eef8e86555e51524fa953a3d1fa6174c6e3133302f7466063
Signer: UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls