Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Bootstrap Slider implementation in LimeSurvey - how to select slider with JQuery

  • ViewBeyond
  • ViewBeyond's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 1 month ago #165480 by ViewBeyond
Hey all - I've spent a fruitless day hacking, so thought I'd ask instead!

Situation)

I have a Multiple Numeric Input question with two sliders, both ranging 0-5

Respondents have to distribute 5 points between two options. At present, they have to slide one slider and then slide the other (the total/remaining shows at the bottom).

I've already written a JQuery function to disable the Next button unless the total is 5 - which is working fine.

For user ease, when one slider is adjusted, I want to automatically adjust the other slider to reflect the total as 5 (i.e. if slider A is moved from 0 to 4, Slider B will go from 5 to 1)

I've successfully done all the value handling in JQuery, with selection of the domain elements, etc. HOWEVER, I can't track down how to select the ancillary slider itself in order to trigger the setValue method from Bootstrap-Slider.

What I'm expecting to be able to do in jQuery is something along the lines of:

$('#inputID').slider('setValue', newValue);

However when I try that with the data slider input I get:

Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'setValue'

When I look at the HTML for the input, I can see all the data-bs-slider- attributes EXCEPT for data-bs-slider-id.

I'm completely at a loss for how to select the slider!

Can anyone point me in the right direction?

Many thanks,
The topic has been locked.
More
6 years 1 month ago #165482 by jelo
An export of the relevant survey section and more information about what LimeSurvey you use might be helpful to get some insight.

If it is not LS 3.X you might find some inspiration in the Workaroundsection. There is a 4 slider pricing question for LTS and LS 2.5X.
manual.limesurvey.org/Workarounds:_Manip...ascript#Version_2.5x

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The following user(s) said Thank You: ViewBeyond
The topic has been locked.
  • ViewBeyond
  • ViewBeyond's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 1 month ago #165486 by ViewBeyond
Good point and sorry for not providing specifics.

I'm on Version 2.73.1+171220.

Screen grab of the relevant division here - from a sandbox I'm working in at the moment.



And, just to complete my idiocy, I'd been to the Workarounds section earlier today when trying to attack the CSRF token issue on iPhone but hadn't connected it back as potential solution source to this issue. From your link, it looks like I may be able to hack a solution - will close the loop here if/when it works!

Thanks so much
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 1 month ago #165493 by LouisGac
JavaScript for numerical sliders is here:
github.com/LimeSurvey/LimeSurvey/blob/2....er_row.php#L155-L229

as you can see, we're switching between slider and normal input to deal with it. That's because LimeSurvey sliders handle a lot of behaviors that doesn't exist out of the box for most sliders, and also because LS is waiting for a string (custom decimal separators, etc) and not an integer.

Depending on what you're trying to do, you could enable the view override to rewrite it from scratch as you want.
manual.limesurvey.org/Theme_editor#Custo...ws_.28version_2.5.29
The topic has been locked.
  • ViewBeyond
  • ViewBeyond's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 1 month ago - 6 years 1 month ago #165503 by ViewBeyond
Thanks everyone for your help - I've got it working this morning just fine!

For others who may be looking, here's the code, abstracted from my functions in template.js.

Note that I tried to rewrite as little as possible in terms of slider function, and (as speed was of importance), I chose to use the change of the Hidden Input that happens when the slider is activated as the trigger for my function, rather than a listener on each slider.
Code:
function changeOtherSliderValue() {
 
    $(document).ready(function() {
 
        //listen for a change in any hidden field
        $('input:hidden').change(function() {
 
            //if the hidden field is part of a Multiple-Numeric question, take action
            if ($('.numeric-multi').length > 0) {
 
                //get questionID
                var thisQuestion = $('.numeric-multi').attr('id');
 
                //get triggering hidden input field ID
                var thisHiddenID = $(this).attr('id');
 
                //get entered value
                var thisSliderValue = $(this).val();
 
                //calculate the new value for the other slider (total = 5)
                var otherSliderValue = 5 - thisSliderValue;
 
                //split the hidden input ID to know which option was changed by user
                var thisOption = thisHiddenID.split('SQ');
 
                var thisOptionID = thisOption[1];
 
                //build target IDs for both Hidden Input and Slider Text Input
                var targetHiddenID = '#' + thisOption[0] + 'SQ';
 
                var targetSliderID = '#slider_' + thisOption[0] + 'SQ';
 
                //add appropriate option for the target
                if (thisOptionID == '001') {
                    //target is 002
 
                    targetHiddenID += '002';
 
                    targetSliderID += '002';
 
                } else {
                    //target is 001
                    targetHiddenID += '001';
 
                    targetSliderID += '001';
 
                }
 
                //call function to move target slider and update input values
                $(thisQuestion).matchSliders(otherSliderValue,targetHiddenID,targetSliderID);
 
            }
 
       });
 
    });
 
}
 
(function( $ ){
 
    $.fn.matchSliders = function(val,targetHiddenID,targetSliderID) { 
 
        //move the target slider
        $(targetSliderID).bootstrapSlider('setValue',val);
 
        //store the value in both hidden and text inputs
        $(targetSliderID).val(val);
        $(targetHiddenID).attr('value',val);
 
        //decide if Next button needs to be activated
        disableQNext();
 
    };
 
})( jQuery );
 
 
Last edit: 6 years 1 month ago by ViewBeyond.
The following user(s) said Thank You: LouisGac
The topic has been locked.
More
5 years 10 months ago - 5 years 10 months ago #169624 by Aeefire
Hey,

I've tried to do a similar thing with LS3.x. I simply set value and data-value attributes of both validation and normal input fields to the desired values. This works as long as the user does not click the scale, but if the user clicks the scale and I try to change the value afterwards - the user's value gets saved (I don't care about the visualization at this point but only the saved database values) instead of my jquery-manipulated value.

Does anyone have a reasoning for this or what is the recommended way to change slider-values in jquery for LS3.x?

Thanks in advance.



This is how I currently change the values - with the limitations as described:
Code:
var inputs = $(':input[type="text"]', thisRow);
inputs.each(function(j){
           $(this).attr("value", "5.5555").attr("data-value", "5.5555");
});

edit:

oh well, adding $(this).val("5.5555") did the job - guess it could sitll be useful for others as a future reference
Last edit: 5 years 10 months ago by Aeefire.
The following user(s) said Thank You: horsti2010
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose