- Posts: 27
- Thank you received: 1
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Change slider numeric value with javascript
- Marksom
- Topic Author
- Offline
- Junior Member
Less
More
8 years 6 months ago #124633
by Marksom
Change slider numeric value with javascript was created by Marksom
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.
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:
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
8 years 6 months ago #124693
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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:
Sample survey attached:
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:
Code:
<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:
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
The topic has been locked.
- Marksom
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 27
- Thank you received: 1
8 years 6 months ago #124764
by Marksom
Replied by Marksom on topic Change slider numeric value with javascript
Perfect tpartner!!!
Thank you very much.
Thank you very much.
The topic has been locked.
- ayt
- Offline
- New Member
Less
More
- Posts: 1
- Thank you received: 0
7 years 7 months ago #139986
by ayt
Replied by ayt on 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
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
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
7 years 7 months ago #139988
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Change slider numeric value with javascript
The sample survey is for LS 2.06. What is your version?I've downloaded your sample survey as attached in your reply but it's not working for me.
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.I'm looking at the same solution but maybe with 3-4 sliders all accumulated to 100%...
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- NielsFro
- Offline
- Junior Member
Less
More
- Posts: 32
- Thank you received: 2
7 years 2 months ago #147506
by NielsFro
Replied by NielsFro on 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
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
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
7 years 2 months ago #147531
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Change slider numeric value with javascript
Here's a script for LimeSurvey version 2.5x:
A sample survey:
Code:
<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:
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
The topic has been locked.
- NielsFro
- Offline
- Junior Member
Less
More
- Posts: 32
- Thank you received: 2
7 years 2 months ago #147567
by NielsFro
Replied by NielsFro on topic Change slider numeric value with javascript
This is so cool, thanks a lot, works perfectly!
The topic has been locked.
- laocoon
- Offline
- Junior Member
Less
More
- Posts: 26
- Thank you received: 1
5 years 9 months ago #170141
by laocoon
Replied by laocoon on 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!
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!
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
5 years 9 months ago - 5 years 9 months ago #170149
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Change slider numeric value with javascript
This will work in 3.x:
Sample survey attached:
Code:
<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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 5 years 9 months ago by tpartner.
The topic has been locked.
- laocoon
- Offline
- Junior Member
Less
More
- Posts: 26
- Thank you received: 1
5 years 9 months ago - 5 years 9 months ago #170161
by laocoon
Replied by laocoon on 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.
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: 5 years 9 months ago by laocoon.
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
5 years 9 months ago #170170
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
The topic has been locked.