Skip to main content

Simple Slider

What is the Form Simple Slider?​

The Simple Slider lets the user pick a single numeric value by dragging one thumb along a track. The filled part of the track runs from the minimum up to the selected value, and a bubble shows the current value while dragging.

simple-slider.png

Options​

Minimum value​

  • The lowest value the slider can reach (the left end of the track).
  • Default: 0.

Maximum value​

  • The highest value the slider can reach (the right end of the track).
  • Default: 100.

Step value​

  • The increment the thumb snaps to while dragging.
  • Default: 5.

Default value​

  • The value the thumb is placed at when the slider first renders, when no value is supplied by a datasource or an external message.
  • Default: 50.

Color​

  • The primary color. It is used for the filled portion of the track and the thumb.
  • The thumb border is derived from this color automatically (lightened or darkened depending on whether the primary color is light or dark).
  • Default: #00a5fe.

Background Color​

  • The color of the unfilled (background) portion of the track.
  • Default: #565970.

Slider size (px)​

  • The thickness of the track.
  • Range: 1 to 50. Default: 8.

Thumb size (px)​

  • The size of the draggable thumb.
  • Range: 1 to 50. Default: 8.

Thumb radius (%)​

  • The corner rounding of the thumb, as a percentage (50% produces a circular thumb).
  • Range: 0 to 50. Default: 50.

Slider radius (px)​

  • The corner rounding of the filled track range.
  • Range: 0 to 18. Default: 4.

Suffix​

  • A short text appended to the value shown in the dragging bubble (for example a unit such as %, kg, or pts).
  • The suffix is display only. It is not part of the stored value.
  • Default: empty.

Setting Mock Field and Own Value​

The Simple Slider stores its value as a single number (the thumb position). It updates the Mock and Own values when:

  • The widget is rendered (using the datasource value if present, otherwise the configured default value).
  • The editor settings change.
  • The thumb is dragged (on every input).
  • An external message tells it to change, clear, or reset.

The export is debounced (about 150 ms) and only happens on the displayer. Exporting also broadcasts the value as a sensor event named after the field (see Sensor Events), unless the update is silent.

Validation​

The Simple Slider does not validate itself.

Sensor Events​

  • The Simple Slider does not validate, so it does not send a {FORM-NAME}-valid event.

  • Whenever the value is exported, the field broadcasts a sensor event named after the field, carrying the current value:

    {FORM-NAME} value: [number]

    This broadcast is suppressed when the change comes from a silent Clear or Reset.

External Messages​

The Simple Slider listens to the three basic external messages:

  • Set Form: Reads the value parameter, parses it as a number, and moves the thumb to that value. Non-numeric values are ignored. Updates the Mock and Own values.
  • Clear Form: Re-initializes the slider to its configured Default value. Updates the Mock and Own values silently.
  • Reset Form: Behaves the same as Clear Form, returning the thumb to the configured Default value silently.

Value from Datasource​

  • When the slider is rendered, if the bound form output datasource already holds a value for this field, the thumb is initialized to that numeric value instead of the configured Default value.
Last updated on