Allowing Slider Values only on a range | XM Community
Solved

Allowing Slider Values only on a range

  • 19 July 2018
  • 1 reply
  • 106 views
D
Rank
Userlevel 2
Badge +1
I have a slider fro 0 to 100, but want to make it so that respondents can only drag the slider halfway from the left (so really only allow 0-50). It's important though that 51-100 are visible, which is why of course we don't just make the slider from 0-50.

I've tried several different ways, including resetting the value of the slider back to 50 if it's ever dragged to 51 or beyond. It may be that I didn't implement the syntax for the Javascript correctly but neither that nor any of the other code I have found online that tries to manipulate the value of a slider seems to work.

Is there a way to do this? Ideally some jQuery on the question for the UI of the slider would not even allow the handle on the slider to be dragged beyond 50 at all, but if that's not possible, then just some lines of code that works to both get and set the value of the slider (so that I can trigger it if the value of the slider goes beyond 50, to reset back to 50) would be great. Thanks!

Below, I can't find where I originally got this from online, but I tried this:

`jQuery(".ResultsInput").slider({
range: "min",
min: 0,
max: 100,
value: 50,
step: 50,
slide: function(event, ui) {
if (ui.value > 50) {
return false;
}
}`
icon

Best answer by DRRTGCC 26 July 2018, 03:15

View original

1 reply

D
Rank
Userlevel 2
Badge +1
I managed to figure this out. On the addOnReady part of the question's Javascript, I adde (the second bit of code is hiding the handle on the slider until the respondent first clicks on the slider's track, and prevents the values of the slider I'm feeding into the page from being updated until that happens, since I have a mousemove function).

The key bit is essentially the "else" statement where I say that if the slider's value is above 50, then just reset it back to 50 with ` jQuery(".ResultsInput").val(50);`. I also print out the values of the slider from both ends (left and right) to the page, setting them both to 50.

`var q = jQuery("#"+this.questionId);
var result=0;
var otherend=0;
var firstclick=0;

q.find(".handle").hide();
q.find(".track").on("click", function() {
q.find(".handle").show();
firstclick=firstclick+1;
});

jQuery("body").mouseup(function () {
if (firstclick>0) {
result = jQuery(".ResultsInput").val();
if(result<=50) {
otherend = 100 - result;
jQuery(".result").html(result);
jQuery(".otherend").html(otherend);
} else {
jQuery(".ResultsInput").val(50);
jQuery(".result").html(50);
jQuery(".otherend").html(50);
}
};
});

jQuery("body").mousemove(function () {
if (firstclick <= 0) {
jQuery(".result").html(0);
jQuery(".otherend").html(0);
} else if (firstclick>0) {
result = jQuery(".ResultsInput").val();
otherend = 100 - result;
jQuery(".result").html(result);
jQuery(".otherend").html(otherend);
};
});`

Leave a Reply


Terms & Conditions