/slider-label

This field plug-in provides a slider appearance with options for labels for integer and decimal fields.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Slider with labels

Preview - slider with different markers

Description

Allows for a slider with an option for markers or labels.

Download now

Features

  • Display a slider with markers
  • Allow for varying step size
  • Allow for displaying the value

Data Format

The field value will be the last value indicated on the slider. This will be an integer for an integer field or a decimal for a decimal field.

Default SurveyCTO feature support

Feature / Property Support
Supported field type(s) integer, decimal
Default values Yes
Constraint message Uses default behavior
Required message Uses default behavior
Read only Yes (shows the current value, if present)
media:image Yes
media:audio Yes
media:video Yes

How to use

  1. Download the test form extras/sample-form from this repo and upload it to your SurveyCTO server.
  2. Download the slider-label.fieldplugin.zip file from this repo, and attach it to the test form on your SurveyCTO server.
  3. Make sure to provide the correct parameters (see below).

Parameters

The plugin can take up to 5 parameters:

  1. min - The lowest value in the range of permitted values.
  2. max - The greatest value in the range of permitted values.
  3. markers - can take three values. -none - slider will have no markers. -yes - slider will have markers at set intervals (determined by the step parameter). -labels - slider will have labels and markers.
  4. step - The step attribute is a number that specifies the granularity that the value must adhere to. The default is 1 for integer and 0.1 for decimals.
  5. display_value (optional) - use this to display the current value of the slider below the slider.

Examples usage is as follows:

custom-slider-label(min="0", max="100", markers="none")
custom-slider-label(min="0", max="100", markers="yes")
custom-slider-label(min="0", max="100", markers="labels")
custom-slider-label(min="0", max="1", markers="labels", step=0.1)
custom-slider-label(min="0", max="10", markers="labels", step=1, display_value="yes")

More resources

Sample form

You can find a form definition in this repo here: extras/sample_form. This form will help you create a sample form to test the functionality of the field plug-in.

Developer documentation