Welcome to the LimeSurvey Community Forum

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

Slider question: indication if slider has been set

  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 11 months ago #118601 by tammo
We are looking into the possibility to style the slider differently once it has been set.

We thought of the following directions:
  • once the slider has been moved by the respondent, the reset button appears (or it is highlighted)
  • Once the slider has been moved the slider subquestion gets another class: before moving: .slider-unset , after moving: .slider-set, possibly even .slider-reset after it has been reset

Has anyone done this yet, or can you give us directions? Is there something in advanced settings that can help us?

Thanks in advance,

Tammo ter Hark


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 11 months ago #118607 by tammo
Of course the last option is preferred...


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 11 months ago - 8 years 11 months ago #118623 by tpartner
You can't use the "slider-reset" class - it's already used for the reset link. However, adding this to the end of template.js will assign the following classes to the slider items:

- slider-unset (slider item has no value)
- slider-set (slider item has value, either from "Slider initial value" setting or previous visit)
- slider-was-reset (slider was reset since page loaded) (the previous classes still apply)

Code:
$(document).ready(function() {
 
  // Initial classes for the slider items
  $('.question-item.withslider').each(function(i) {
    if($('input[type="text"]', this).val() == '') {
      $(this).addClass('slider-unset');
    }
    else {
      $(this).addClass('slider-set');
    }
  });
 
  // Listener on the sliders
  $('.ui-slider').on('slide', function(event, ui) {
    $(this).closest('.question-item').removeClass('slider-unset').addClass('slider-set');
  });
 
  // Listener on the slider reset links
  $('a.slider-reset').on('click', function(event) {
    $(this).closest('.question-item').addClass('slider-was-reset');
  });
});

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 11 months ago by tpartner.
The following user(s) said Thank You: tammo, jonsen
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 11 months ago #118666 by tammo
Thanks, we will try this!

Will let you know!


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 11 months ago #118980 by tammo
Thanks Tony, we did get this to work. We needed to do some alterations since the structure of our template is a little different. It will be in the Premium version og our template. This will be released this month.

Thanks again,

Tammo ter Hark


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
More
6 years 6 months ago - 6 years 6 months ago #157945 by jonsen
I had to switch round the if-statement and the selectors a bit to make it work in LimeSurvey v2.65:
Code:
$(function() {    
    // Initial classes for the slider items
  $('.question-item.withslider').each(function(i) {
    if($(this, '> div > input').val() != '') {
      $(this).addClass('slider-set');
    }
    else { 
        $(this).addClass('slider-unset');  
    }
  });
 
  // Listener on the sliders
  $('.question-item.withslider > div > input').on('change', function(event, ui) {
    $(this).closest('.question-item').removeClass('slider-unset').addClass('slider-set');
  });
 
  // Listener on the slider reset links
  $('a.slider-reset').on('click', function(event) {
    $(this).closest('.question-item').addClass('slider-was-reset');
  });
});
Last edit: 6 years 6 months ago by jonsen.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose