Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Changing Color of Slider Upon Clicking/Moving

Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68865

Hello,
I am using several sliders as part of a mandatory question and was wondering if there is any way I can have the slider change color upon moving/clicking it. My goal is to quickly show which sliders were touched (moved) by the participant and which were not.

Many thanks.
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68878

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
That is a nice idea but such a feature doesn't exist yet. I'm sure that using some Javascript it is possible to e.g. change the slider handle (there are different images for the slider handle at limesurvey\images) once the slider was moved.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68897

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
You can use the "change" event for the slider to add a class when it's moved and then a little CSS to highlight that class.

1) Add the following to the end of template.js:
$(document).ready(function() {
 
		$( ".ui-slider-horizontal" ).bind( "slidechange", function(event, ui) {
		  $(this).parents('li').addClass('changedSlider');
		});
 
	});

2) Add something like the following to the end of template.css (these styles are for the default template and would need to be modified for other templates):
.numeric-multi .answer li {
	border-bottom: 5px solid #FFFFFF;
}
 
.numeric-multi .answer li label {
	background-color: #FFFFFF;
}
 
.numeric-multi .answer li div.multinum-slider {
    margin: 1.5em 0.5em 0.2em 0;
	padding-left: 0.5em;
}
 
.ui-slider-1 {    
	margin-bottom: 10px;
}
 
.changedSlider {
	background-color: #99FFFF;
}

Capture_2011-11-10.PNG
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 8 months ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: Kaufi

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68907

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
Nice!

Please add at at the workaround so we won't loose this great feature when older forum topics get deleted.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68908

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
Please add at at the workaround so we won't loose this great feature when older forum topics get deleted.

docs.limesurvey.org/Workarounds%3A+Quest...#Slider_Highlighting
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: DenisChenu

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68939

I have to say this: "Wow"

Worked like a charm

Thanks!
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #68940

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
tpartner wrote:
Please add at at the workaround so we won't loose this great feature when older forum topics get deleted.

docs.limesurvey.org/Workarounds%3A+Quest...#Slider_Highlighting
:woohoo:

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #69338

  • uxexp
  • uxexp's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 19
  • Karma: 0
Hello,
I am using a slider exactly like this one with the color change option. I am facing an interesting problem. The sliders change color upon clicking, no problems here. However, if I choose to not complete a mandatory question and click on the "Next" button at the bottom of the page, I get a message saying: "Mandatory questions were not answered". I say OK and then I am presented with the slider question page again. Except, this time, all the colors (from clicking)on the sliders are now gone (none of the sliders are now colored). Any idea why?

Thank you.
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #69354

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5301
  • Thank you received: 291
  • Karma: 247
I think this is a technical problem. The sliders change color once you move them, this is done client side by using javascript.
After a mandatory warning the page is reloaded by the server. Though the values are recorded and it is obvious that they have changed, the colors are switched to the default values on page load. Only when being moved, the color would change again because some user action triggers the color change. It has to be implemented server side as well to keep the color change on page load.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Changing Color of Slider Upon Clicking/Moving 2 years 8 months ago #69386

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
We can use the slider "create" event but it needs to be bound before the page loads.

So, change the code in template.js to this:
$('html').bind('slidecreate', function(event, ui) { 
	$('.slider_callout').each(function(i){
		if($(this).text().length > 0) {
			$(this).parents('li:eq(0)').addClass('changedSlider');
		}
	});
});
 
$(document).ready(function() {
 
	$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
	  $(this).parents('li:eq(0)').addClass('changedSlider');
	});
 
});

I've updated the wiki - docs.limesurvey.org/Workarounds%3A+Quest...#Slider_Highlighting
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.164 seconds
Donation Image