====== addSliderTicks - Add ticks marks for slider grid lines ======
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:\\
{{ ::addSliderTicks.mp4?650 |addSliderTicks Demonstration}}

This function is available for a reasonable fee. Contact [[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]] on the Qualtrics Community to learn more.
===== Set-up Instructions =====
==== Survey Header ====
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 -> {{::icon_source.jpg?20|}} and paste the provided addSliderTicks function JS:
<code>
<script>/*Paste addSliderTicks function JS here*/</script>
</code>
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.
==== Slider Question ====
=== Question Settings ===
  * Turn on Mobile Friendly
  * Set desired number of gridlines
=== Question JavaScript ===
Add JS to call the addSliderTicks function to apply it to the Slider question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	addSliderTicks(this);
});
</code>

To change the default options, specify the desired **[[addsliderticks#options|options]]** as an object. For example: 
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	addSliderTicks(this,{topTicks:false});
});
</code>
===== Options =====
==== bottomMarginTop ====
**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 **[[addsliderticks#CSS for Tick Margins|CSS]]** to set a consistent margin for the entire survey. 

Default: undefined (use CSS instead)
==== bottomTicks ====
**bottomTicks** is a boolean that specifies if bottom ticks should be displayed. To hide bottom ticks set to false.

Default: true
==== tickPadding ====
**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:
<code>
addSliderTicks(this,{
  tickPadding:{
    3:[
      {side:"left",pixels:9},
      {side:"left",pixels:2},
      {side:"right",pixels:7}
    ]
  }
});
</code>
==== topMarginBottom ====
**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 ====
**topTicks** is a boolean that specifies if top ticks should be displayed. To hide top ticks set to false.

Default: true
===== CSS for Tick Margins =====
Here is example CSS for tick margins (these particular styles are for Classic layout):
<code>
.JFEScope .Skin .q-slider ul.ticks.top { margin-bottom: -11px; }
.JFEScope .Skin .q-slider ul.ticks.bottom { margin-top: -14px; }
</code>
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]