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 (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).
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).
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.

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"
/>