Differences

This shows you the differences between two versions of the page.

--- sliderticks [2022/09/29 10:58] – admin
+++ sliderticks [2023/03/09 17:26] (current) – admin
@@ Line 1: / Line 1: @@
-====== sliderTicks - Add top and/or bottom tick marks for slider grid lines ======
+====== 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.
+The **sliderTicks** function adds top and/or bottom tick marks for each slider gridline.
 Functionality includes:
@@ Line 7: / Line 7: @@
   * Add top, bottom, or top and bottom tick marks.
-sliderTicks ONLY works with mobile friendly sliders.
+**sliderTicks** ONLY works with mobile friendly sliders.
-Here is a quick video demonstration:\\
+Here is a quick video demonstration of top and bottom tick marks with "snap to grid" turned on:\\
 {{ ::addSliderTicks.mp4?650 |sliderTicks Demonstration}}
@@ Line 15: / Line 15: @@
 ===== 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 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>
@@ Line 21: / Line 20: @@
 </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 ===
@@ Line 26: / Line 27: @@
   * Set desired number of gridlines
 === Question JavaScript ===
-Add JS to call the sliderTicks function to apply it to the Slider question as follows:
+Add JS to call the **sliderTicks** function to apply it to the Slider question as follows:
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
@@ Line 41: / Line 42: @@
 ===== 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 **[[sliderticks#CSS for Tick Margins|CSS]]** to set a consistent margin for the entire survey.
+**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.
-Default: undefined (use CSS instead)
+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 ticks set to false.
+**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. 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:
+**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,{
@@ Line 61: / Line 68: @@
 });
 </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. Instead of this option, use CSS to set a consistent margin for the entire survey.
+**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.
-Default: undefined (use CSS instead)
+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 ticks set to false.
+**topTicks** is a boolean that specifies if top ticks should be displayed. To hide top tick marks set to false.
 Default: true
-===== CSS for Tick Margins =====
+===== CSS =====
-Here is example CSS for tick margins (these particular styles are for Classic layout):
+The provided CSS rules format the following:
-<code>
+  - 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.
-.JFEScope .Skin .q-slider ul.ticks.top { margin-bottom: -11px; }
+  - 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.
-.JFEScope .Skin .q-slider ul.ticks.bottom { margin-top: -14px; }
-</code>
+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]]