James feeling thermometer updates (#193)

* update feeling thermometer text

* fix slider over anchoring

* update test

Author: JamesPHoughton

cypress/screenshots/labeledRangeTest/afterClick.png

@@ -1,6 +1,6 @@
 {
   "name": "@watts-lab/surveys",
-  "version": "1.17.2",
+  "version": "1.17.4",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

cypress/screenshots/labeledRangeTest/beforeClick.png

@@ -3,20 +3,6 @@
   /* stop from overflowing sides and triggering horizontal scrollbar */
 }
 
-.slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-
-  padding-left: 2%;
-  padding-right: 2%;
-  border: 0;
-  /* remove bottom border line */
-  width: 100%;
-}
-
 .sliderLabels {
   display: flex;
   width: 100%;
@@ -33,23 +19,37 @@
   overflow-wrap: break-word;
 }
 
-.slider::-webkit-slider-runnable-track {
+input.sv-text[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+
+  padding-left: 2%;
+  padding-right: 2%;
+  border: 0;
+  /* remove bottom border line */
+  width: 100%;
+}
+
+input.sv-text[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: 5px;
   background: #ddd;
   border: none;
   border-radius: 3px;
 }
 
-.slider::-moz-range-track {
+input.sv-text[type="range"]::-moz-range-track {
   width: 100%;
   height: 5px;
   background: #ddd;
   border: none;
   border-radius: 3px;
 }
 
-.slider::-webkit-slider-thumb {
+input.sv-text[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   height: 20px;
@@ -60,7 +60,7 @@
   visibility: hidden;
 }
 
-.slider::-moz-range-thumb {
+input.sv-text[type="range"]::-moz-range-thumb {
   border: none;
   height: 20px;
   width: 16px;
@@ -69,30 +69,26 @@
   visibility: hidden;
 }
 
-.slider.sliderClicked::-webkit-slider-thumb {
+input.sv-text.sliderClicked[type="range"]::-webkit-slider-thumb {
   visibility: visible;
 }
 
-.slider.sliderClicked::-moz-range-thumb {
+input.sv-text.sliderClicked[type="range"]::-moz-range-thumb {
   visibility: visible;
 }
 
-.slider:focus {
+input.sv-text[type="range"]:focus {
   outline: none;
 }
 
-.slider:focus::-webkit-slider-runnable-track {
+input.sv-text[type="range"]:focus::-webkit-slider-runnable-track {
   background: #ccc;
 }
 
-.slider:focus::-moz-range-track {
+input.sv-text[type="range"]:focus::-moz-range-track {
   background: #ccc;
 }
 
-/* ----------------added styles to make required changes by Amir Rahman from upwork---------------- */
-
-/* to resolve the issue : https://github.com/Watts-Lab/surveys/issues/110 */
-
 .sliderLabel {
   width: 0px;
   left: 0px;
@@ -141,6 +137,6 @@ datalist.sliderLabels {
   width: 100%;
 }
 
-.active {
-  font-weight: bold;
-}
+/* .active { */
+/* font-weight: bold; */
+/* } */

package.json

@@ -90,23 +90,24 @@ export function labeledRange(SurveyJS) {
       el.appendChild(dl);
 
       slider.setAttribute("list", dl.id);
-      slider.classList.add("slider");
+      // slider.classList.add("slider");
 
       if (question.showProgressBar) slider.classList.add("progressBar");
 
-      slider.addEventListener("mousedown", () =>
-        slider.classList.add("sliderClicked")
-      );
+      slider.addEventListener("mousedown", () => {
+        // slider.classList.add("slider");
+        slider.classList.add("sliderClicked");
+      });
 
       // added additionally for highlighting label
-      let last = null;
-      slider.addEventListener("input", (e) => {
-        let val = e.target.value;
-        last?.classList.remove("active");
-        const activeEl = dl.querySelector(`[value='${val}']`);
-        activeEl?.classList.add("active");
-        last = activeEl;
-      });
+      // let last = null;
+      // slider.addEventListener("input", (e) => {
+      //   let val = e.target.value;
+      //   last?.classList.remove("active");
+      //   const activeEl = dl.querySelector(`[value='${val}']`);
+      //   activeEl?.classList.add("active");
+      //   last = activeEl;
+      // });
     },
   };
 

src/customQuestionTypes/labeledRange.css

@@ -0,0 +1,10 @@
+import React from "react";
+import { PartisanFeelingThermometerUS } from "../../src/index";
+
+describe("PartisanFeelingThermometerUS", () => {
+  it("loads", () => {
+    cy.viewport("macbook-11");
+    cy.mount(<PartisanFeelingThermometerUS />);
+    cy.viewport("macbook-11");
+  });
+});

src/customQuestionTypes/labeledRange.js

@@ -26,9 +26,15 @@
               "step": 1,
               "valueLabels": [
                 { "value": 0, "text": "0: Very cold or unfavorable" },
-                { "value": 25, "text": "" },
+                { "value": 10, "text": "" },
+                { "value": 20, "text": "" },
+                { "value": 30, "text": "" },
+                { "value": 40, "text": "" },
                 { "value": 50, "text": "50: Neutral" },
-                { "value": 75, "text": "" },
+                { "value": 60, "text": "" },
+                { "value": 70, "text": "" },
+                { "value": 80, "text": "" },
+                { "value": 90, "text": "" },
                 { "value": 100, "text": "100: Very warm or favorable" }
               ]
             },
@@ -43,9 +49,15 @@
               "step": 1,
               "valueLabels": [
                 { "value": 0, "text": "0: Very cold or unfavorable" },
-                { "value": 25, "text": "" },
+                { "value": 10, "text": "" },
+                { "value": 20, "text": "" },
+                { "value": 30, "text": "" },
+                { "value": 40, "text": "" },
                 { "value": 50, "text": "50: Neutral" },
-                { "value": 75, "text": "" },
+                { "value": 60, "text": "" },
+                { "value": 70, "text": "" },
+                { "value": 80, "text": "" },
+                { "value": 90, "text": "" },
                 { "value": 100, "text": "100: Very warm or favorable" }
               ]
             }

surveys/partisanFeelingThermometerUS/partisanFeelingThermometerUS.dev.cy.jsx

@@ -1 +1 @@
-{"survey":"163f58cdc566f42014cecd7d4f02caac094bd194","score":"150210b7aba45083a2483b58e028c525b2e1fde7"}
+{"survey":"53b6a48f3d80efcc1f8c1a8a165b60d363771d32","score":"150210b7aba45083a2483b58e028c525b2e1fde7"}