Make parts of html slider unselectable

[soyowoo]

Hello, I want to make the middle part of my slider unselectable. So for a slider ranging from 0-100 I want 45-55 unselectable.
I am a complete beginner to javascript so not really sure how to approach this. I thought of modifying the plugin js file but I am not sure which part to change (not even sure if this is the right way to go about)
Any ideas are welcome! Thank you in advance for your help :)

[becky-gilbert]

Hi @soyowoo, AFAIK there are no attributes in the slider (i.e. input type="range") element that allow you to exclude values that fall between the max and min, so you would need to add your own code to do this. I found your question on this Stack Overflow post, which has two answers - I haven't tested them but I assume they both work. Since you can't actually disable the middle values, the general approach that the two SO answers take is to check the slider value each time it changes, and if the value is one of the excluded values (i.e. 45-55), automatically change it to something else (i.e. round it to either 44 or 56). There are other things you could choose to do in response to the user selecting an excluded value, such as displaying some warning text on the screen and/or disabling the trial's 'continue' button. If you don't want to modify the plugin itself, then I think you could do this using the trial's on_load function, which is a function that runs after the trial first loads, which means you can select and modify the elements on the page such as the slider, continue button, etc.

Some other options that I can think of are to set the slider labels to be only the allowed values (so that they skip 45-55), or present two different sliders on the page, one for 0-44 and one for 56-100.

I hope that helps. Please let us know if you need further guidance.