Table of Contents

Input slider discrete

Live demo

Renders a discrete slider input where users can select one value (or a range) from an explicit list of allowed numeric values.

Node name : input-slider-discrete

Attributes

Bound

Attribute Type Required Default value Description
item UI view false @DatasourceCurrent Item to be bound to
property-name string true UI view property name

Unbound

Attribute Type Required Default value Description
value number or number[] true Input value. Use a scalar value for single mode, and an array of two values for range mode.
values string or bound expression true Allowed values for the slider. Constant values must be a comma-separated numeric list containing between 1 and 20 entries, with no upper limit when show-markers is false (for example 0,25,50,75,100). Bound values can target a numeric collection.
is-range bool false false Enables range mode (two thumbs, start/end values).
show-markers bool false true Displays the markers and their labels under the track. Set to false for a slider without graduation, which stays readable with many values.
track-thickness int false 4 Thickness of the track, in pixels, at least 1.
track-border-width int false 0 Border width of the track, in pixels (0 or more), added around its thickness.
track-border-color string false Color of the track border.
thumb-size int false 18 Diameter of the thumb(s), in pixels, at least 1.
thumb-border-width int false 2 Border width of the thumb(s), in pixels (0 or more). A width of half the thumb-size or more gives a filled thumb.
track-color string false Color used for the non-selected track segment.
selected-track-color string false Color used for the selected track segment.
selected-thumb-color string false Color used for the slider thumb(s).
selected-track-border-color string false Color of the border of the selected track segment.
thumb-background string false Background color of the slider thumb(s).
disabled bool false false Value indicating whether the input is disabled.
documentation string false Documentation text displayed by the field documentation button.
label string false Input label.
message-severity string (information, warning, error) false Severity of the message to display under the input.
message-text string false Message to display under the input.
readonly bool false false Value indicating whether the input is read-only.
required bool false false Value indicating whether the input is required.
tab-stop bool false true Value indicating whether the input can be focused using the Tab key.
value-changed string false Name of the method called when the value changes. The first parameter is the new value, and the second is the current item of the data source (DatasourceCurrent) or the iterated item in a repeat.

Common

Attribute Type Required Default value Description
focused bool false false Value indicating whether the component is focused.
label-position string (top, left, right, hidden) false top Input label position.
message-position string (bottom, hidden) false bottom Input message position.

Remarks

  • The component requires either property-name (bound mode) or value (unbound mode).
  • The values attribute is mandatory in both modes.
  • For constant values, each item must be numeric. Decimal and negative numbers are supported.
  • Every color defaults to the SliderDiscrete attributes of the theme (TrackColor, TrackBorderColor, SelectedTrackColor, SelectedTrackBorderColor, SelectedThumbColor and ThumbBackground). The color attributes of the component override them for one slider.

Behavior Notes

  • The slider snaps to the nearest value from values.
  • Range mode is enabled when is-range is true.
  • Arrow keys (ArrowLeft, ArrowRight) move the active thumb, with Ctrl + arrow keys switching between thumbs in range mode.
  • Interaction is disabled when read-only, disabled, or when values is empty.

Examples

Bound single value

<input-slider-discrete property-name="Score" values="0,25,50,75,100" />

Bound range value

<input-slider-discrete property-name="Scores" is-range="true" values="0,25,50,75,100" />

Unbound single value

<input-slider-discrete label="Score" value="@Fields.Score" values="@Fields.Values" />

Unbound range value with custom colors

<input-slider-discrete
  label="Score range"
  value="@Fields.Scores"
  is-range="true"
  values="0,25,50,75,100"
  track-color="#111111"
  selected-track-color="#123456"
  selected-thumb-color="#654321"
/>

Slider without graduation

<input-slider-discrete
  label="Duration"
  value="@Fields.Duration"
  values="0,50,100,150,200,250,300,350,400,450,500,550,600"
  show-markers="false"
  track-thickness="6"
  thumb-size="16"
  thumb-border-width="8"
/>