Slider question: indication if slider has been set

More
2 years 6 months ago #118601 by tammo
tammo created the topic: Slider question: indication if slider has been set
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 Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in to join the conversation.

More
2 years 6 months ago #118607 by tammo
tammo replied the topic: Slider question: indication if slider has been set
Of course the last option is preferred...


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in to join the conversation.

More
2 years 6 months ago - 2 years 6 months ago #118623 by tpartner
tpartner replied the topic: Slider question: indication if slider has been set
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)

$(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: 2 years 6 months ago by tpartner.
The following user(s) said Thank You: tammo, jonsen

Please Log in to join the conversation.

More
2 years 6 months ago #118666 by tammo
tammo replied the topic: Slider question: indication if slider has been set
Thanks, we will try this!

Will let you know!


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in to join the conversation.

More
2 years 6 months ago #118980 by tammo
tammo replied the topic: Slider question: indication if slider has been set
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 Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in to join the conversation.

More
1 month 3 weeks ago - 1 month 3 weeks ago #157945 by jonsen
jonsen replied the topic: Slider question: indication if slider has been set
I had to switch round the if-statement and the selectors a bit to make it work in LimeSurvey v2.65:
$(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: 1 month 3 weeks ago by jonsen.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now