Differences

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

--- addsliderticks [2022/09/28 20:21] – [Slider Question] admin
+++ addsliderticks [2022/09/28 20:29] (current) – admin
@@ 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 ===
@@ 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 68: / 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]]