Welcome to the LimeSurvey Community Forum

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

Change slider numeric value with javascript

  • Marksom
  • Marksom's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 6 months ago #124633 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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #124693 by tpartner
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:

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:

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.
The following user(s) said Thank You: Marksom
The topic has been locked.
  • Marksom
  • Marksom's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
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.

:)
The topic has been locked.
More
7 years 7 months ago #139986 by ayt
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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 7 months ago #139988 by tpartner
Replied by tpartner on 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.
The topic has been locked.
More
7 years 1 month 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 1 month ago #147531 by tpartner
Replied by tpartner on topic Change slider numeric value with javascript
Here's a script for LimeSurvey version 2.5x:

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:

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.
The following user(s) said Thank You: DenisChenu, NielsFro
The topic has been locked.
More
7 years 1 month 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.
More
5 years 8 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!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago - 5 years 8 months ago #170149 by tpartner
Replied by tpartner on topic Change slider numeric value with javascript
This will work in 3.x:

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:

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.
Last edit: 5 years 8 months ago by tpartner.
The topic has been locked.
More
5 years 8 months ago - 5 years 8 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.
Last edit: 5 years 8 months ago by laocoon.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago #170170 by tpartner
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.

Lime-years ahead

Online-surveys for every purse and purpose