The addSliderTicks function add tick marks for each slider gridline.

Functionality includes:

• Supports any number of grid lines
• Can be use with any theme and layout

addSliderTicks ONLY works with mobile friendly sliders.

Here is a quick video demonstration:

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

To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag: Add the addSliderTicks 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 addSliderTicks function JS:

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

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

• Turn on Mobile Friendly
• Set desired number of gridlines

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

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

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

Qualtrics.SurveyEngine.addOnload(function() {
	addSliderTicks(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. Instead of this option, use CSS to set a consistent margin for the entire survey.

Default: undefined (use CSS instead)

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

Default: true

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. Default arrays are provided for the most popular scales: 3, 4, 5, 7, 10, and 11 points (note: the number of gridlines specified in a Qualtrics slider question is always one less than the number of scale points). If no array is specified for the number of scale points, tick marks are aligned the same as the number scale. 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}
    ]
  }
});

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. Instead of this option, use CSS to set a consistent margin for the entire survey.

Default: undefined (use CSS instead)

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

Default: true

Here is example CSS for tick margins (these particular styles are for Classic layout):

.JFEScope .Skin .q-slider ul.ticks.top { margin-bottom: -11px; }
.JFEScope .Skin .q-slider ul.ticks.bottom { margin-top: -14px; }

Qualtrics Wiki