Trying to make slider with arrows instead of dragging the marker | XM Community
Skip to main content

Hello! I have JavaScript code that allows me to change the slider question type to use two arrows underneath the slider to move the marker when assigning ratings. However, I would like to disable the ability to move the marker by clicking it with your mouse and then dragging it because this discourages the use of the arrows. Any ideas on code that could help? Any help would be great!

Hi there, any chance you could post the code that you are using to move the slider handle using arrows? The below CSS will disable the mouse interacting with the slider track/handle:
.Skin .horizontalbar .track, .Skin .horizontalbar .handle {
    pointer-events: none;
}

Hi Tom_1842 ! This is great and very useful. It basically does what I need it to do, except I would like to include code that does not apply to the entire survey (my understanding is that CSS does). Is there a JavaScript equivalent that I could add to every individual question I would like to apply this feature to? I really appreciate your help!

SliderHelp You can do this with JavaScript by using jQuery. The below should work:
jQuery("#"+this.questionId+" .track").css({"pointer-events":"none"});
jQuery("#"+this.questionId+" .handle").css({"pointer-events":"none"});
You can also apply CSS to a single page by adding the below to the HTML of the Question Text using the Rich Content Editor's Source "<>" view:


Fantastic! Thank you @Tom_1842! That solved my issue!!

Leave a Reply


Terms & Conditions