Slider Input

Tips & examples

An interactive draggable thumb slider moving along a horizontal or vertical line track, featuring optional value tooltips, customizable step increments, and mark indicators.

When to use

Allowing users to select a numeric value smoothly along a bounded continuous track by dragging a handle.
Providing intuitive numeric controls for adjustments like volume, distance, budgets, or percentage scale settings.

What you need

Disabled by default until a default_form is present on the page layout. Requires a valid Data Source pairing (Element ID and Field Path) to store the numeric output.

Form-bound integers or decimal numeric fields requiring selection within explicit minimum and maximum range thresholds.

Examples

A horizontal budget allocation slider bounded between 0 and 1000 with step increments of 50.
A vertical volume level adjust control placed in a media settings form panel.

Avoid

Using for unconstrained numeric entry where exact, highly precise numbers must be typed directly, use number_input instead.
Allocating inadequate grid space for vertical orientation (requires at least 4 vertical rows) or horizontal orientation (requires at least 3 horizontal columns).
Attempting to map form data sources before adding a parent default_form element to the canvas layout.

Use instead

Number Input — The user needs to type precise, exact numeric figures directly with custom adornments rather than dragging along a range track.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Element IDrequiredNumber or TextInside `dataSource`: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or NumberInside `dataSource`: Path into the source element’s data (property segments).
Default: none

Input

Default ValueoptionalNot set (null): Initial integer value assigned to the slider thumb handle position.
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example false
Default: none

Styling

ColoroptionalOne of: primary, secondary

Sets the visual accent color tint for the track and handle thumb.

Choices

primary
secondary

Default: none

OrientationoptionalOne of: horizontal, vertical

Controls the track direction alignment. Significantly alters visual layout structure.

Choices

horizontal
vertical

Default: none

Advanced

MinrequiredNumber

Integer number input defining the minimum allowed value threshold on the slider track.

Default: none

MaxrequiredNumber

Integer number input defining the maximum allowed value threshold on the slider track.

Default: none

StepoptionalNot set (null)

Number input defining the handle movement increment granularity (supports decimal values).

Default: none

Value Label DisplayoptionalOne of: on, off, auto

Dropdown governing value tooltip/popover visibility behavior over the thumb handle.

Choices

on — Tooltip stays permanently visible over the thumb handle.
off — Tooltip is completely hidden.
auto — Tooltip displays dynamically only when hovering or dragging the handle.

Default: none

TrackoptionalOne of: normal, false, inverted

Dropdown governing track fill direction relative to the thumb handle.

Choices

normal — Track fills from left to right (or bottom to top in vertical mode).
false — Track is hidden.
inverted — Track fills in the reverse direction.

Default: none

MarksoptionalYes / no or List of Settings group

Boolean switch showing step indicator tick dots along the slider line track.

Default: none

Sizing

No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

Translatable labels

label — Title text displayed prominently above the slider component.

Accessibility

Renders a semantic slider role (role='slider') with aria-valuemin, aria-valuemax, and aria-valuenow attributes updated dynamically.

Arrow keys (Left/Down to decrease, Right/Up to increase) adjust value steps.
Home and End keys move thumb to min and max boundaries.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.mySliderInput.<property>

value number Current input value of this control. elements.mySliderInput.value

When The current position as a number, updating as the handle moves. Use it to drive a live threshold or a filter on a neighbouring element.

disabled boolean True while the control is locked and cannot be edited. elements.mySliderInput.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.mySliderInput.value

Replace mySliderInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
6
{
  "config": {
    "min": 0,
    "max": 0
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": 0,
    "disabled": false,
    "nullable": false,
    "min": 0,
    "max": 0,
    "step": 0,
    "color": "primary",
    "marks": false,
    "orientation": "horizontal",
    "track": "normal",
    "value": 0,
    "valueLabelDisplay": "on"
  }
}

Ready-made setups

Bounded Percentage Range Slider ↕

A horizontal primary-colored slider bounded between 0 and 100 with step tick marks and auto tooltips.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "config": {
    "dataSource": {
      "elementId": "settingsForm",
      "fieldPath": [
        "completionPercentage"
      ]
    },
    "input": {
      "defaultValue": 50,
      "disabled": "@@expression: false",
      "nullable": false
    },
    "styling": {
      "color": "primary",
      "orientation": "Horizontal"
    },
    "advanced": {
      "min": 0,
      "max": 100,
      "step": 5,
      "valueLabelDisplay": "auto",
      "track": "Normal",
      "enableMarks": true
    }
  }
}

Notes

Description

The DefaultSliderInput is used to reflect a range of values along a bar, from which users may select a single value.

config

property	type	description	required
`min`	`number`	The minimum allowed value of the slider. Should not be equal to max.
`max`	`number`	The maximum allowed value of the slider. Should not be equal to min.
`step`	`number	null`	The granularity with which the slider can step through values. If set to `null`, values can only be set to existing marks
`color`	`“primary”	“secondary”`	The color
`marks`	`boolean	number[]`	values to which the user can move the slider
`orientation`	`“horizontal”	“vertical”`	The slider orientation
`track`	`“normal”	false	“inverted”`
`valueLabelDisplay`	`“on”	“auto”	“off”`

i18n

name	description	required
label	Text displayed at the top of the bar

When to use

What you need

Examples

Avoid

Related elements

Editor properties

Sizing

Translatable labels

Accessibility

Values you can read in expressions

Where you can place it

Ready-made setups

Notes

Description

config

i18n