Skip to main content

Search

Slider questions

  • Updated

A slider is a graphical control element that allows respondents to set a value by moving an indicator horizontally or vertically, or by clicking on a point on the scale. Open-end slider questions can be created via the type: slider tag.

Try it!

For information on creating closed-ended slider questions, see Radio slider questions.

For information on creating open-end scale ratings using stars and other icons, see Star questions.

Details

  • Sliders are compatible with both simple tables and the start table widget.
  • The range of the scale is specified with the min and max tags. Both tags require whole number inputs.
  • The step tag allows you to define the increment or decrement value on a slider scale. Steps can be specified as whole numbers or decimals.
  • If the step tag is omitted, the slider will increase/decrease by 1 unit per step.
  • Sliders are displayed horizontally by default but can be flipped vertically with the vertical: y tag.

Tags

Tag Description
breakheadings

Accepts 'y' and 'n' inputs. Enables a line break in column headings in a logical place. If a heading is not being split as desired, use breakheadings: n to prevent automatic line breaks.
dvalue

Specifies a starting point for the "thumb"/cursor on the scale and sets the initial value for the question. Accepts whole number values.

heading (single)

Creates a single header for the options.

headings (multiple)

Creates two or more headings above the table options. These headings are separated by commas and placed on the the polar extremes of the table (e.g., headings: Least Important, Most Important).
height

Used with vertical: y. Specifies the height of the slider widget in either pixels or as a percent. Requires whole number input; e.g., height: 500 for 500 pixels, or height: 20%.

label above

(alias labels above)

 Set to 'y' to display the label steps above the slider. Defaults to 'n' (displaying label steps below slider).

label hide

(alias labels hide)

 Set to 'y' to hide the labels of the slider.

label step

(alias labels step)

Defines the delta (increments) at which points the slider labels are rendered; requires whole number input.

Must be used with the step tag.
max

Specifies the max value of slider range (whole numbers only).

Only for use with sliders and slider tables.
min

Specifies the min value of slider range (whole numbers only).

Only for use with sliders and slider tables.
postfix Specifies a postfix to be applied to the labels and selected values on the slider scale.
prefix Specifies a prefix to be applied to the labels and selected values on the slider scale.
step Defines the increment or decrement value on a slider scale. Steps can be specified as whole numbers or decimals.
value display

Specifies whether or not to display the value selected on the slider scale.

Defaults to 'y' for sliders and 'n' for radio sliders.
vertical Set to 'y' to flip scale orientation to vertical.
width

Specifies the width of the slider widget in pixels or as a percent. Requires whole number input; e.g., width: 500 for 500 pixels, or width: 50%.

Additional examples

Specifying an initial value and placing labels above

When applied to sliders, the dvalue tag sets the initial position of the cursor based on the specified value. Adding the label above: y tag shifts the labels (scale steps) above the slider, causing the selected values to appear below the scale.

Vertical sliders

To flip the slider's orientation to vertical, add vertical: y. The height tag has been included to specify the length of the slider scale.

Slider tables with headings

The headings tag can be applied to both sliders and slider tables to clarify numeric scales.

Summing slider tables

Validations can be applied to slider tables so that you can calculate and enforce a total sum across all sliders. In this example, the sum of the slider values selected must add to $250, and the validation will be triggered if the total does not match.

 

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.