Differences

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

--- sliderticks [2022/09/29 16:33] – [Custom CSS] 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 ======
-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 with top and bottom tick marks:\\
+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 28: / 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 47: / Line 46: @@
 Use this option only to override the provided **[[sliderticks#CSS|CSS]]** rules on an individual question basis.
-Default: undefined (use CSS instead)
+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
@@ Line 55: / Line 54: @@
 **tickChar** is the character used for tick marks.
-Default: "|"
+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:
@@ Line 71: / Line 70: @@
 Use this option only to override the provided **[[sliderticks#CSS|CSS]]** rules on an individual question basis.
-Default: {} (use CSS instead)
+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.
@@ Line 77: / Line 76: @@
 Use this option only to override the provided **[[sliderticks#CSS|CSS]]** rules on an individual question basis.
-Default: undefined (use CSS instead)
+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
@@ Line 85: / Line 84: @@
 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 do 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. Rules are provided for the most commonly used scale point configurations (note: in a Qualtrics Slider question there is always one less grid line than there are scale points): 2, 3, 4, 5, 7, 10, 11. Additional rules can be added for other scale point configurations.
+  - 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]]