Slider

The Slider allows the user to select a value from a given range of values controlled by the developer. Values represent numerical input (type Integer or Float).

A full example setup of the Slider is available in our Showroom. You can view a demo and see how to set this up in Appfarm Create. If you do not have access to the Showroom, you may register here.

Properties

Value

The property that is bound to the Slider.

Second Value

An optional second property which will allow the user to choose two values on the same Slider. This can be useful if the user needs to select a custom range, for instance.

Min

The minimum value of the Slider. Default is 0.

Max

The maximum value of the Slider. Default is 100.

Step

The granularity of the Slider. E.g. if step is set to 0.5, the user will have the option of 0, 0.5, 1, 1.5, 2 and so on. Default value is 1.

Slider Color

The colour can be set to either Primary or Secondary, which are values determined by the active Theme.

Vertical Slider

The Slider will appear vertically instead of horizontally if this checkbox is toggled.

Value Label

This property can be set to Off, On or Auto. Off means that the value label is never visible to the user. On means that the value label is always visible to the user. Auto means that the value label is visible to the user on hover and on focus. Default is set to Off.

If the precision of the value is important, it is recommended to set this property to On or Auto so that users can see the exact value of their input and adjust if necessary.

Marks

Marks can appear on the slider at intervals, to further indicate the value of the input to the user. This property can be set to Off, On or Custom. Off means that no marks will appear to the user. On means that marks will appear at regular intervals, defined by the Step property. Custom gives the developer full flexibility to design and implement marks wherever necessary.

Using custom marks is a way to customise sliders to appear to take non-numerical input, but the value stored in the database will still be numerical.

Restrict to Marks

This property is only available when the Marks property is set to Custom. This means that the user can only select values defined within the custom marks.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. One Event Handler is available for the Slider component:

On Value Change: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, a UI component or filter can be updated when a change is detected in the value bound to the component.