Change slider numeric value with javascript

More
3 years 2 months ago #124633 by Marksom
Marksom created the topic: Change slider numeric value with javascript
Hello friends.

I have a question with multiple numerical input and I'm using slider.
Are two percentage options and their sum must be 100%.

When the participant indicate the value of the 1st option, I would like the 2nd option was automatically filled.

I use javascript, but do not know how to display the value.

Thank you.
Attachments:

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago #124693 by tpartner
tpartner replied the topic: Change slider numeric value with javascript
You can place a listener on the sliders with the jQuery UI Slider slide event .

So, to ensure that two sliders in the same question always total to 100, you can add a script like this to the question source:

<script type="text/javascript" charset="utf-8">		
	$(document).ready(function() {
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
 
			var thisQuestion = $(this).closest('.numeric-multi');
			var thisRow = $(this).closest('li.answer-item');			
			var otherRow = $('li.answer-item', thisQuestion).not(thisRow);
 
			$('.ui-slider', otherRow).slider('option', 'value', 100-ui.value);
			$('input.text', otherRow).val($('.ui-slider', otherRow).slider('option', 'value').toString().replace(/\./, LSvar.sLEMradix));
			$('.slider_callout', otherRow).text($('input.text', otherRow).val());
		});
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...82-2.lss
File Size:15 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Marksom

Please Log in or Create an account to join the conversation.

More
3 years 2 months ago #124764 by Marksom
Marksom replied the topic: Change slider numeric value with javascript
Perfect tpartner!!!
Thank you very much.

:)

Please Log in or Create an account to join the conversation.

More
2 years 3 months ago #139986 by ayt
ayt replied the topic: Change slider numeric value with javascript
Hi Tony,

I've downloaded your sample survey as attached in your reply but it's not working for me. I'm looking at the same solution but maybe with 3-4 sliders all accumulated to 100%, are you able to help?

Many thanks,

Andy

Please Log in or Create an account to join the conversation.

More
2 years 3 months ago #139988 by tpartner
tpartner replied the topic: Change slider numeric value with javascript

I've downloaded your sample survey as attached in your reply but it's not working for me.

The sample survey is for LS 2.06. What is your version?

I'm looking at the same solution but maybe with 3-4 sliders all accumulated to 100%...

I don't think you can achieve that with 4 sliders. If one slider is moved, what do you expect to do to the other 3? Move them all a little bit? I don't see that as user-friendly or intuitive.

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

Please Log in or Create an account to join the conversation.

More
1 year 9 months ago #147506 by NielsFro
NielsFro replied the topic: Change slider numeric value with javascript
Hi @tpartner (does this work in the LS forum? I'm new to it - otherwise Hi Tony),

I've already profited from your codes and hints to a great extent, so thank you for all your work in the first place!

I am using LimeSurvey Version 2.51.0+160829 and I can not get your code from above working, probably because it's for LS 2.06, I also tried downloading and importing your sample survey.

Is there anything I can change in the code you provided in order to make it work in 2.51?

Thanks a lot and best regards
Niels

Please Log in or Create an account to join the conversation.

More
1 year 9 months ago #147531 by tpartner
tpartner replied the topic: Change slider numeric value with javascript
Here's a script for LimeSurvey version 2.5x:

<script type="text/javascript" charset="utf-8">		
 
	$(document).ready(function() {
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
			var otherSlider = $('input[type="text"]', thisQuestion).not(this);
			otherSlider.bootstrapSlider('setValue', 100 - $(this).val());
		});
    });
</script>

A sample survey:

File Attachment:

File Name: limesurvey...3989.lss
File Size:17 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: DenisChenu, NielsFro

Please Log in or Create an account to join the conversation.

More
1 year 9 months ago #147567 by NielsFro
NielsFro replied the topic: Change slider numeric value with javascript
This is so cool, thanks a lot, works perfectly!

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago #170141 by laocoon
laocoon replied the topic: Change slider numeric value with javascript
hey,

I know that this topic is quite old, but is there a way to do this in LimeSurvey 3.12.x ?
Thanks a lot in advance!

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago - 4 months 4 weeks ago #170149 by tpartner
tpartner replied the topic: Change slider numeric value with javascript
This will work in 3.x:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('body').on('slide slideStop', '#question{QID} input.answer-item', function(event) {
			var thisName = $(this).attr('name').replace('slid', '');
 
			var otherSlider = $('input.answer-item', thisQuestion).filter(function () { 
									return $(this).attr('name').replace('slid', '') != thisName; 
								}).first();
 
			var psSeparator = $(this).attr('data-ps-separator');
			var psStep =  $(this).attr('data-ps-step');
			var sliderVal = Number($(this).val().replace(psSeparator, '.'));
 
			// Move the slider
			var otherName = $(otherSlider).attr('name').replace('slid', '');			
			window.activeSliders['s'+otherName].getSlider().setValue(100-sliderVal);
 
			// Handle the inputs
			var displayValue = $(otherSlider).val().toString().replace('.', psSeparator); 
			$(otherSlider).val(displayValue);
			$(otherSlider).closest('li.answer-item').find('input.em_sq_validation').val(displayValue);
 
			// Fire Expression Manager
			ExprMgr_process_relevance_and_tailoring('keyup', otherName, 'change');
		});
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...6-20.lss
File Size:19 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 4 months 4 weeks ago by tpartner.

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago - 4 months 4 weeks ago #170161 by laocoon
laocoon replied the topic: Change slider numeric value with javascript
Thanks a lot! Is it even possible to do this with more than 2 sliders or is it limited to 2?

So for example: if I got 5 Sliders and I'm pushing the last one so that the sum of the 5 goes above 100 every slider of the other four goes down the same value.
Last Edit: 4 months 4 weeks ago by laocoon.

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago #170170 by tpartner
tpartner replied the topic: Change slider numeric value with javascript
How would that work? What would you set the other sliders to when adjusting the first?

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

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago #170172 by laocoon
laocoon replied the topic: Change slider numeric value with javascript
If I got 5 Sliders the start-value would be 100/5. If I move the first Slider up all the others go down by (100-(value of slider1))/4.
Maybe the result has to be rounded down if you get fractions of numbers.

I know it won't be easy, but I thought that maybe someone already had the same problem.

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago #170173 by tpartner
tpartner replied the topic: Change slider numeric value with javascript
That would be very confusing for the respondent. What happens when hey move a second slider? Does the first also get adjusted again. If not, what happens when they have moved all sliders and the total is not 100?

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

Please Log in or Create an account to join the conversation.

More
4 months 4 weeks ago #170186 by laocoon
laocoon replied the topic: Change slider numeric value with javascript
That's a good point. I will think about it and consider if I can achieve my purposes otherwise better.

Thanks a lot for your fast responses.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!