From 50de647a5e02fefe8f8e55a1b7abe1d999a8a139 Mon Sep 17 00:00:00 2001
From: raynatang <56328677+raynatang@users.noreply.github.com>
Date: Fri, 9 Aug 2024 19:07:03 -0500
Subject: [PATCH] Add real-time value display feature to
 plugin-html-slider-response

Added real-time value display feature to plugin-html-slider-response: if the parameter value_display is set as true, the slider's value will be displayed in real-time below the slider as participants adjust it.

Before participants adjust the slider, the displayed value will be the slider_start value
---
 packages/plugin-html-slider-response/src/index.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-html-slider-response/src/index.ts b/packages/plugin-html-slider-response/src/index.ts
index 1351cb25ff..3bf3eb1067 100644
--- a/packages/plugin-html-slider-response/src/index.ts
+++ b/packages/plugin-html-slider-response/src/index.ts
@@ -73,6 +73,11 @@ const info = <const>{
       type: ParameterType.BOOL,
       default: true,
     },
+    /** If true, the slider's value will be displayed in real time below the slider. */
+    value_display: {
+      type: ParameterType.BOOL,
+      default: true,
+    },
   },
   data: {
     /** The time in milliseconds for the participant to make a response. The time is measured from when the stimulus first appears on the screen until the participant's response. */
@@ -129,7 +134,13 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
       trial.max +
       '" step="' +
       trial.step +
-      '" id="jspsych-html-slider-response-response"></input>';
+      '" id="jspsych-html-slider-response-response"> ';
+    if (trial.value_display) {
+      html += 'oninput="this.nextElementSibling.value = this.value"></input>';
+      html += "<output>" + trial.slider_start + "</output>";
+    } else {
+      html += "></input>";
+    }
     html += "<div>";
     for (var j = 0; j < trial.labels.length; j++) {
       var label_width_perc = 100 / (trial.labels.length - 1);