I have a slider question in my survey where the slider handle only appears when the respondent touches the slider (the survey is conducted on mobile/ tablets). I want the textbox next to the slider to be blank before the respondent toucher the handle and then record the value that the respondent sets. I am using the following code and while everything else in the code is working, the part which is supposed to make the box blank is not.
var q = jQuery("#" + this.questionId);
// Hide the handle initially
q.find(".handle").css('visibility', 'hidden');
// Clear the input box initially
q.find('input.textEntryBox').val(' ');
// Function to handle the visibility of the handle and record the position
function showHandleAndRecordPosition(event) {
var handle = jQuery(this).find(".handle");
handle.css('visibility', 'visible');
// Get the position where the touch/click occurred
var position = event.originalEvent.touches ? event.originalEvent.touchesv0].clientX : event.clientX;
// Convert the position to a value based on your slider's range (assuming a horizontal slider)
// This part of the code should be customized based on your slider's implementation
var sliderOffset = jQuery(this).offset().left;
var sliderWidth = jQuery(this).width();
var sliderValue = ((position - sliderOffset) / sliderWidth) * 100; // Assuming the value is between 0 and 100
console.log("Initial touch/click position value:", sliderValue);
// You can store this value as needed
q.data('initialTouchPosition', sliderValue);
}
// Add event listeners for click and touchstart
q.find(".track").on("click touchstart", showHandleAndRecordPosition);
Any help with fixing/ troubleshooting this would be much appreciated.
Thanks