Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Community Edition Version 6.6.1+240806
Own server or LimeSurvey hosting: University server
Survey theme/template: fruity
==================
Hi,
I am using a multiple numeric entries type question, with horizontal sliders. The sliders are grouped close to each other in order to allow easy visual comparison between the sliders values. When answering the question on a phone, I need to scroll up and down the page. My issue is that it is way to easy to accidentally change the value of the sliders while trying to scroll. It seems like it is quite a common problem with sliders, but I hope that maybe someone could have an idea here to tackle this problem ?
So far, I have disabled the possibility to change the value of the slider by clicking directly on the track, so that one has to grab the handle to change the value. This helps but doesn't solve the issue completely. I am also thinking about highlighting the slider in some way when the respondant touch it, so that he may at least realize that he may be changing the slider value. My coding abilities are limited and I couldn't get this to work so far. I should add that I do not have access to theme editing.
Guidance about highlighting the slider when the handle is grabbed, or any other way to solve my issue would be greatly appreciated !
EDIT : an nice way to highlight the slider being dragged would be to turn handle red for instance. I guess this can be done using slideStart and slideStop events.
EDIT : I could eventually change the color of the handle using slideStart and slide Stop event and some answers by DenisChenu and tpartner from another thread : [url]
forums.limesurvey.org/forum/can-i-do-thi...alue-changes?start=0
[/url]. Here is the javascript to turn the handle red :
Code:
$(document).on('ready pjax:scriptcomplete',function() {
var thisQuestion = $('#question{QID}');
// SlideStart function
$('.form-control', thisQuestion).on('slideStart', function( event ) {
$(this).closest('.slider-container').find('.slider-handle').css('background-color', 'red');
console.log($(this).val());
console.log($(this));
console.log($(this).closest(".slider-container").find('.slider-handle')[1]);
});
});
Any other idea about how to make sure people don't change sliders values by accident while scrolling the page is welcome !
