Differences

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

--- addsliderticks [2022/09/28 19:12] – created admin
+++ addsliderticks [2022/09/28 20:29] (current) – admin
@@ Line 8: / Line 8: @@
 addSliderTicks ONLY works with mobile friendly sliders.
-Example:\\
+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.
@@ Line 19: / Line 19: @@
 <script>/*Paste addSliderTicks function JS here*/</script>
 </code>
-Alternatively, paste the mcAlphabetize function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.
+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
-  * Add desired number of gridlines
+  * Set desired number of gridlines
 === Question JavaScript ===
 Add JS to call the addSliderTicks function to apply it to the Slider question as follows:
@@ Line 32: / Line 32: @@
 </code>
-To change the default options, specify the desired [[addsliderticks#options|options]] as an object. For example:
+To change the default options, specify the desired **[[addsliderticks#options|options]]** as an object. For example:
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
@@ Line 40: / Line 40: @@
 ===== 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 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. 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)
@@ Line 48: / Line 48: @@
 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 direction of the adjustment (left or right) and the size of the adjustment in pixels. For example, the default adjustment for a 3-point scale is:
+**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>
-</code>
+addSliderTicks(this,{
+  tickPadding:{
+:[
+      {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.
@@ Line 59: / Line 68: @@
 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]]