====== sliderTicks - add top and/or bottom tick marks for slider grid lines ======
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:\\
{{ ::addSliderTicks.mp4?650 |sliderTicks 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 ====
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 -> {{::icon_source.jpg?20|}} and paste the provided sliderTicks function JS:
<code>
<script>/*Paste sliderTicks function JS here*/</script>
</code>
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.
==== Custom CSS ====
The provided **[[sliderTicks#CSS|CSS]]** rules control the placement of tick marks. Go to Look & Feel → Style → Custom CSS edit and paste the provided rules.
==== Slider Question ====
=== Question Settings ===
  * Turn on Mobile Friendly
  * Set desired number of gridlines
=== Question JavaScript ===
Add JS to call the **sliderTicks** function to apply it to the Slider question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	sliderTicks(this);
});
</code>

To change the default options, specify the desired **[[sliderticks#options|options]]** as an object. For example: 
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	sliderTicks(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.

Use this option only to override the provided **[[sliderticks#CSS|CSS]]** rules on an individual question basis. 

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

Default: true
==== tickChar ====
**tickChar** is the character used for tick marks.

Default: %%"|"%%
==== 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. 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>
Use this option only to override the provided **[[sliderticks#CSS|CSS]]** rules on an individual question basis.

Default: {} (use CSS rules)
==== 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.

Use this option only to override the provided **[[sliderticks#CSS|CSS]]** rules on an individual question basis. 

Default: undefined (use CSS rules)
==== topTicks ====
**topTicks** is a boolean that specifies if top ticks should be displayed. To hide top tick marks set to false.

Default: true
===== CSS =====
The provided CSS rules format the following:
  - 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.
  - 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 **[[sliderTicks#bottomMarginTop|bottomMarginTop]]**, **[[sliderTicks#tickPadding|tickPadding]]**, and **[[sliderTicks#topMarginBottom|topMarginBottom]]** options. 
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]