The sliderTicks function adds top and/or bottom tick marks for each slider gridline.

Functionality includes:

• Supports any number of grid lines
• Can be used with any theme and layout
• Add top, bottom, or top and bottom tick marks.

sliderTicks ONLY works with mobile friendly sliders.

Here is a quick video demonstration of top and bottom tick marks with “snap to grid” turned on:

This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.

Add the sliderTicks function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided sliderTicks function JS:

<script>/*Paste sliderTicks function JS here*/</script>

Alternatively, paste the sliderTicks function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.

The provided CSS rules control the placement of tick marks. Go to Look & Feel → Style → Custom CSS edit and paste the provided rules.

• Turn on Mobile Friendly
• Set desired number of gridlines

Add JS to call the sliderTicks function to apply it to the Slider question as follows:

Qualtrics.SurveyEngine.addOnload(function() {
	sliderTicks(this);
});

To change the default options, specify the desired options as an object. For example:

Qualtrics.SurveyEngine.addOnload(function() {
	sliderTicks(this,{topTicks:false});
});

bottomMarginTop is an integer, usually negative, that specifies the top margin of the bottom ticks in pixels. This determines the space between slider bar and the bottom ticks. The ideal margin will vary based on theme and layout.

Use this option only to override the provided CSS rules on an individual question basis.

Default: undefined (use CSS rules)

bottomTicks is a boolean that specifies if bottom ticks should be displayed. To hide bottom tick marks set to false.

Default: true

tickChar is the character used for tick marks.

Default: "|"

tickPadding is an object of arrays that allows for tick marks to be adjusted to align with the center of the slider handle at each gridline. The adjustments specified in tickPadding are the differences in positioning from the number scale. Each tickPadding array consists of an object specifying the side of the adjustment (left or right) and the size of the adjustment in pixels. For example, a function call specifying tickPadding for a 3-point scale would look like this:

addSliderTicks(this,{
  tickPadding:{
    3:[
      {side:"left",pixels:9},
      {side:"left",pixels:2},
      {side:"right",pixels:7}
    ]
  }
});

Use this option only to override the provided CSS rules on an individual question basis.

Default: {} (use CSS rules)

topMarginBottom is an integer, usually negative, that specifies the bottom margin of the top ticks in pixels. This determines the space between the top ticks and slider bar. The ideal margin will vary based on theme and layout.

Use this option only to override the provided CSS rules on an individual question basis.

Default: undefined (use CSS rules)

topTicks is a boolean that specifies if top ticks should be displayed. To hide top tick marks set to false.

Default: true

The provided CSS rules format the following:

1. The top and bottom margins of the tick containers. The margins control the space (or lack of space) between the tick marks and the slider bar. The default rules are customized for Classic theme layout, but can be adjusted for other theme layouts.
2. The horizontal positioning of tick marks. Without CSS rules, the tick marks use the same positioning as the number scale, which does not align with the center of the slider handles at the gridlines. The alignment of tick marks with gridlines differs based on the number of scale points. CSS rules are provided for the most commonly used scale point configurations: 2, 3, 4, 5, 7, 10, and 11 (note: in a Qualtrics Slider question there is always one less grid line than there are scale points). Additional rules can be added for other scale point configurations.

The CSS rules can be overridden on a individual question basis by using the bottomMarginTop, tickPadding, and topMarginBottom options.

Qualtrics Wiki