From 3424f386fffb242690889a8951b55f6a9437432a Mon Sep 17 00:00:00 2001
From: Becky Gilbert <beckyannegilbert@gmail.com>
Date: Wed, 28 Oct 2020 12:05:59 -0700
Subject: [PATCH] fix slider label positioning with custom track/thumb CSS &
 calc - fixes #695

---
 css/jspsych.css                          | 73 ++++++++++++++++++++++++
 plugins/jspsych-audio-slider-response.js | 20 +++++--
 plugins/jspsych-html-slider-response.js  | 16 ++++--
 plugins/jspsych-image-slider-response.js | 22 ++++---
 plugins/jspsych-video-slider-response.js | 22 ++++---
 5 files changed, 129 insertions(+), 24 deletions(-)

diff --git a/css/jspsych.css b/css/jspsych.css
index 20d10905..9a07da4d 100644
--- a/css/jspsych.css
+++ b/css/jspsych.css
@@ -96,6 +96,79 @@
   cursor: not-allowed;
 }
 
+/* custom style for input[type="range] (slider) to improve alignment between positions and labels */
+
+.jspsych-slider {
+  appearance: none;
+  -webkit-appearance: none; 
+  -moz-appearance: none;
+  width: 100%; 
+  background: transparent; 
+}
+.jspsych-slider:focus {
+  outline: none;
+}
+/* track */
+.jspsych-slider::-webkit-slider-runnable-track {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+.jspsych-slider::-moz-range-track {
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+.jspsych-slider::-ms-track {
+  appearance: none;
+  width: 99%;
+  height: 14px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+/* thumb */
+.jspsych-slider::-webkit-slider-thumb {
+  border: 1px solid #666;
+  height: 24px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -9px;
+}
+.jspsych-slider::-moz-range-thumb {
+  border: 1px solid #666;
+  height: 24px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+}
+.jspsych-slider::-ms-thumb {
+  border: 1px solid #666;
+  height: 20px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+  margin-top: -2px;
+}
+
 /* jsPsych progress bar */
 
 #jspsych-progressbar-container {
diff --git a/plugins/jspsych-audio-slider-response.js b/plugins/jspsych-audio-slider-response.js
index 9b37b92d..7f909204 100644
--- a/plugins/jspsych-audio-slider-response.js
+++ b/plugins/jspsych-audio-slider-response.js
@@ -86,6 +86,9 @@ jsPsych.plugins['audio-slider-response'] = (function() {
 
   plugin.trial = function(display_element, trial) {
 
+    // half of the thumb width value from jspsych.css, used to adjust the label positions
+    var half_thumb_width = 7.5; 
+
     // setup stimulus
     var context = jsPsych.pluginAPI.audioContext();
     if(context !== null){
@@ -109,17 +112,22 @@ jsPsych.plugins['audio-slider-response'] = (function() {
     }
 
     var html = '<div id="jspsych-audio-slider-response-wrapper" style="margin: 100px 0px;">';
-  	html += '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
+  	html += '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
     if(trial.slider_width !== null){
-      html += 'width:'+trial.slider_width+'px;';
+      html += trial.slider_width+'px;';
+    } else {
+      html += 'auto;';
     }
     html += '">';
-    html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-audio-slider-response-response"></input>';
+    html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-audio-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){
-      var width = 100/(trial.labels.length-1);
-      var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
-      html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
+      var label_width_perc = 100/(trial.labels.length-1);
+      var percent_of_range = j * (100/(trial.labels.length - 1));
+      var percent_dist_from_center = ((percent_of_range-50)/50)*100;
+      var offset = (percent_dist_from_center * half_thumb_width)/100;
+      html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
+      'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
       html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
       html += '</div>'
     }
diff --git a/plugins/jspsych-html-slider-response.js b/plugins/jspsych-html-slider-response.js
index 1e38408d..d59309de 100644
--- a/plugins/jspsych-html-slider-response.js
+++ b/plugins/jspsych-html-slider-response.js
@@ -102,19 +102,27 @@ jsPsych.plugins['html-slider-response'] = (function() {
 
   plugin.trial = function(display_element, trial) {
 
+    // half of the thumb width value from jspsych.css, used to adjust the label positions
+    var half_thumb_width = 7.5; 
+
     var html = '<div id="jspsych-html-slider-response-wrapper" style="margin: 100px 0px;">';
     html += '<div id="jspsych-html-slider-response-stimulus">' + trial.stimulus + '</div>';
     html += '<div class="jspsych-html-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
     if(trial.slider_width !== null){
       html += 'width:'+trial.slider_width+'px;';
+    } else {
+      html += 'width:auto;';
     }
     html += '">';
-    html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-html-slider-response-response"></input>';
+    html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-html-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){
-      var width = 100/(trial.labels.length-1);
-      var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
-      html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
+      var label_width_perc = 100/(trial.labels.length-1);
+      var percent_of_range = j * (100/(trial.labels.length - 1));
+      var percent_dist_from_center = ((percent_of_range-50)/50)*100;
+      var offset = (percent_dist_from_center * half_thumb_width)/100;
+      html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
+      'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';  
       html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
       html += '</div>'
     }
diff --git a/plugins/jspsych-image-slider-response.js b/plugins/jspsych-image-slider-response.js
index 4448102d..74bcac74 100644
--- a/plugins/jspsych-image-slider-response.js
+++ b/plugins/jspsych-image-slider-response.js
@@ -122,6 +122,9 @@ jsPsych.plugins['image-slider-response'] = (function() {
 
   plugin.trial = function(display_element, trial) {
 
+    // half of the thumb width value from jspsych.css, used to adjust the label positions
+    var half_thumb_width = 7.5; 
+
     var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
     html += '<div id="jspsych-image-slider-response-stimulus">';
     html += '<img src="'+trial.stimulus+'" style="';
@@ -139,17 +142,22 @@ jsPsych.plugins['image-slider-response'] = (function() {
     }
     html += '"></img>';
     html += '</div>';
-    html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
-    if(trial.slider_width !== null){
-      html += 'width:'+trial.slider_width+'px;';
+    html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
+    if (trial.slider_width !== null) {
+      html += trial.slider_width+'px;';
+    } else {
+      html += 'auto;';
     }
     html += '">';
-    html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
+    html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-image-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){
-      var width = 100/(trial.labels.length-1);
-      var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
-      html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
+      var label_width_perc = 100/(trial.labels.length-1);
+      var percent_of_range = j * (100/(trial.labels.length - 1));
+      var percent_dist_from_center = ((percent_of_range-50)/50)*100;
+      var offset = (percent_dist_from_center * half_thumb_width)/100;
+      html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
+      'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
       html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
       html += '</div>'
     }
diff --git a/plugins/jspsych-video-slider-response.js b/plugins/jspsych-video-slider-response.js
index bc261c13..1260b5bd 100644
--- a/plugins/jspsych-video-slider-response.js
+++ b/plugins/jspsych-video-slider-response.js
@@ -145,6 +145,9 @@ jsPsych.plugins["video-slider-response"] = (function() {
 
   plugin.trial = function(display_element, trial) {
 
+    // half of the thumb width value from jspsych.css, used to adjust the label positions
+    var half_thumb_width = 7.5; 
+
     // setup stimulus
     var video_html = '<video id="jspsych-video-slider-response-stimulus-video"';
 
@@ -181,17 +184,22 @@ jsPsych.plugins["video-slider-response"] = (function() {
 
     var html = '<div id="jspsych-video-slider-response-wrapper" style="margin: 100px 0px;">';
     html += '<div id="jspsych-video-slider-response-stimulus">' + video_html + '</div>';
-    html += '<div class="jspsych-video-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
-    if(trial.slider_width !== null){
-      html += 'width:'+trial.slider_width+'px;';
+    html += '<div class="jspsych-video-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
+    if (trial.slider_width !== null) {
+      html += trial.slider_width+'px;'
+    } else {
+      html += 'auto;'
     }
     html += '">';
-    html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-video-slider-response-response"></input>';
+    html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-video-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){
-      var width = 100/(trial.labels.length-1);
-      var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
-      html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
+      var label_width_perc = 100/(trial.labels.length-1);
+      var percent_of_range = j * (100/(trial.labels.length - 1));
+      var percent_dist_from_center = ((percent_of_range-50)/50)*100;
+      var offset = (percent_dist_from_center * half_thumb_width)/100;
+      html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
+        'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
       html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
       html += '</div>'
     }