Skip to main content
Version: v11.9.0

Slider


Sliders are often the UI control of choice for letting users select a value or range from a fixed set of options. Sliders are good to use while:

  • setting mobile volumes such as media, alarm clock, and ringtones etc.
  • setting screen brightness
  • setting price range while purchasing things online

Properties

PropertyDescription
NameThe name is a unique identifier for slider widget.
Accessibility
HintAny text or an HTML you enter for this property will be shown as a tooltip if the mouse hovers over this widget for 1.5 seconds.
Tab indexThe tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable. NOTE: In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option "Press Tab to highlight each item on a webpage".
Shortcut keyThe shortcut key property specifies a shortcut key to activate/focus an element. (*See below for details)
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Default Value
ValueThis is the default value to display value for an editor widget. Note that the display value is just what the user sees initially, and is not always the dataValue returned by the widget.
Minimum ValueEnter minimum number. This property applies when the type is a number.
Maximum ValueEnter maximum number. This property applies when the type is a number.
StepIt is a composite widget with a label and a selector. The user can select from the range specified with the increment as defined by the step value.
Behavior
Read OnlySelecting this checkbox property prevents the user from being able to change the data value of a widget.
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
DisabledIf the disabled property is true (checked) the value of the editor cannot change. The widget becomes display-only.
Range
RangeThis property can be used to add a range within the Slider Widget.
DatatypeSelect the input datatype. This property is to provide the datatype that can be number or dataset
DatasetThis is to provide the input data array
DatafieldThis property indicates the field (in DataSet) to represent selected value for the range in Slider widget. It should be mapped to an integer field in DataSet.
DisplayexpressionThis is an advanced property that gives more control over what values are to be displayed for the range in the Slider widget. A Display Expression uses a JavaScript expression to format exactly what is shown. For readonly mode, If dataset is null then the caption can be bound directly to display expression.
Tooltip expressionThis property is used to get and customize the text displayed in the tooltip associated with the range value.
ShowmarkersThis property can be used to control whether a marker or indicator is displayed on the Slider widget.
ShowtooltipEnable this property to show the tooltip for the applied range.
  • Range
  • Datatype - number or dataset
  • Dataset - to provide a dataset
  • Datafield - about the data given in the dataset
  • Displayfield -
  • Displayexpression - to add
  • Tooltip expression - value on top of the thumb
  • Showmarkers - display the scale
  • Showtooltip - whether to display tooltip or not

Shortcut key: The shortcut key property specifies a shortcut key to click the button. The way of accessing the shortcut key is varying in different browsers:

BrowserShortcut key Trigger
Internet Explorer[Alt] + shortcut key
Chrome[Alt] + shortcut key (Windows/Linux)
[Control][Alt] + shortcut key (MAC)
Firefox[Alt][Shift] + shortcut key (Windows/Linux)
[Control][Alt] + shortcut key (MAC)

Events

EventDescription
ChangeThis event handler is called each time your element's value changes.