Skip to content

Guide to the "slider" field plug in

Jump to bottom
mofya1 edited this page Mar 27, 2020 · 3 revisions

The slider field plug-in provides a continuous slider with no markers allowing you to select a numeric value within a given range.

slider screenshot

The slider will enable more subjective ratings primarily for a numeric range of values. As slider scales use numbers instead of text, they can easily be used across multiple languages without misinterpretation or mistranslation.

Also consider the likert appearance option for select_one fields as an alternative. However, use the slider field plug-in for wider numeric value ranges, and for ease of use, as it allows the user to slide their finger on screen, or with their mouse cursor, to refine their response.

Getting Started

First, download the field plug-in zip file from the GitHub repository. An example form in Excel format is also available for quick testing.

Secondly, you will have to attach the field plug-in zip file to your form, and the name of the plug-in must be specified in a field's appearance parameter, with the prefix "custom-".

Thirdly, the slider field plug-in also requires three parameters to be specified, with a fourth that is optional:

  1. min: The lowest value in the range of permitted values.
  2. max: The greatest value in the range of permitted values.
  3. step: The step attribute is a number that specifies the granularity that the value must adhere to. The default is 1 for integer fields and 0.1 for decimal fields.
  4. display_value (optional) - use this to display the current value of the slider below the slider.

All the above parameters can be dynamically be populated with values entered into fields in the form design. The product documentation has specific instructions on parameters but in the end, your plug-in should be something like the any of following:

  • custom-slider(min="0", max="1", step=0.01) - specify these parameters for a decimal field to get 100 steps/degrees between 0 and 1.
  • custom-slider(min="0", max="100", step=1, display_value='yes') – with the fourth parameter set to yes, this will display the current value of the slider below it.
  • custom-slider(min=${minimum}, max=${maximum}, step=1) - the min is specified as the value stored in the "minimum" field in the form design, and the max is specified as the value stored in the "maximum" field.

Please note: the step parameter is related to the field type in your form definition. Integer fields should have integer values for min, max and step. Decimal fields should have a decimal step value.

Using the field plug-in on a device

For the user of your form, using the slider field plug-in will simply see a slider on the screen.

Please note: The default value for the slider is null, so the slider must be moved at least once to record a value otherwise this will be null

Clone this wiki locally