Welcome to the LimeSurvey Community Forum

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

How add a double slider in LS???

  • RoMaier
  • RoMaier's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 6 days ago #93627 by RoMaier
How add a double slider in LS??? was created by RoMaier
Hi,

can someone please help me to integrate a Jquary file in LimeSurvey? I would like to add a double Slider as question type, and I haven´t experience on how to do this. Could I add this based on the simple slider in "multiple numerical inputs"?

Thanks in advance!
Ronja
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 6 days ago #93630 by holch
Replied by holch on topic How add a double slider in LS???
You'll probably have to join two different questions as described in this workaround:

docs.limesurvey.org/Workarounds%3A+Quest...stion_types_in_array

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • RoMaier
  • RoMaier's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 6 days ago #93635 by RoMaier
Replied by RoMaier on topic How add a double slider in LS???
Oky thanks, so I should make an extra question for each controller and connect both?
Attachments:
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 5 days ago #93668 by DenisChenu
Replied by DenisChenu on topic How add a double slider in LS???
Hello,

Think best is to do a "multi numeric" simle question (without included slider) and use you own script to:
  1. Hide the LS answer
  2. Use slider.range from jquery jqueryui.com/slider/#range and put this in question text or answer part.
  3. Udate the inout.text from default LS with the slider range number ( use slide: function( event, ui ) { } to do this).

DSenis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • RoMaier
  • RoMaier's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 5 days ago - 11 years 5 days ago #93679 by RoMaier
Replied by RoMaier on topic How add a double slider in LS???
Thanks!!!

I do unfortunately not understand what you mean by 3., but so far it looks like this:


Zeitstrahl
Code:
<script src="scripts/jquery/jquery-ui-1.10.1.custom.js"></script><script>
 
$(function() {
 
  $( ".multinum-slider" ).slider({
    range: true,
    values: [ 17, 67 ]
    });
 
        $( "#dialog-link, #icons li" ).hover(
    function() {
    $( this ).addClass( "ui-state-hover" );
      },
    function() {
      $( this ).removeClass( "ui-state-hover" );
      }
    );
  });
  </script>



The slider seems so, but the length is not correctly detected and the values ​​still not stored in Ls, right?
I'm sorry if this is trivial, but I am really new here :)

thanks in advance!
Last edit: 11 years 5 days ago by DenisChenu. Reason: js tag
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 5 days ago #93681 by DenisChenu
Replied by DenisChenu on topic How add a double slider in LS???

RoMaier wrote: I'm sorry if this is trivial, but I am really new here :)

It's not trivial.

1st : remove
Code:
<script src="scripts/jquery/jquery-ui-1.10.1.custom.js"></script>
LS have already jquery-ui/js

A starting script with a multi numeric question (and 2 sub question for start/end):
The QCODE is QQ
Then sub question code are START and END
Code:
$("#question{QID} .subquestions-list").hide();
$("<div id='slider-range' />").insertAfter("#question{QID} .subquestions-list");
$( "#slider-range" ).slider({
  range: true,
  min: 17,
  max: 50,
  values: [ 17, 50 ],
slide: function( event, ui ) {
$( "#answer{SGQ}START" ).val( "$" + ui.values[ 0 ] );
$( "#answer{SGQ}END" ).val( "$" + ui.values[ 1 ] );
}
});
$( "#answer{SGQ}START" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) );
$( "#answer{SGQ}START" ).val( "$" + $( "#slider-range" ).slider( "values", 1 ) );

Script not tested

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 5 days ago - 10 years 8 months ago #93686 by tpartner
Replied by tpartner on topic How add a double slider in LS???
Here is a small jQuery plugin that inserts a jQuery UI range slider into a multi-numeric question and automatically populates that question's inputs with the range min and max values.

The plugin handles:
- previous answers
- slider max/min
- range min start
- range max start
- range span min
- slider step
- slider width
- record the start values
- show slider max and min

1) Add the following to the end of template.js:
Code:
// A jQuery plugin to display a range slider in LimeSurvey
(function( $ ){
 
  $.fn.lsRangeSlider = function(options) {  
 
    // The defaults, extended and modified with any passed in the function call
    var opts = $.extend( {
      range      :true, 
      sliderMin    :0, 
      sliderMax    :100,
      rangeStartMin    :'',
      rangeStartMax    :'',
      minRangeSpan    :0,
      step      :1,
      width      :250, 
      recordStart    :false,
      showMin      :false,
      showMax      :false
    }, options);
 
    return this.each(function() { 
 
      if($(this).hasClass('numeric-multi') &amp;&amp; $('input.text', this).length == 2) {
 
        // Define some vars  
        var $this = $(this);
        var qID = $(this).attr('id').split('question')[1];
        var rangeMinInput = $('input.text:eq(0)', $this); 
        var rangeMaxInput = $('input.text:eq(1)', $this); 
 
        // Some classes for the question and sub-questions
        $this.addClass('range-slider-question');
 
        // Check for pre-existing answer
        if($(rangeMinInput).val() != '' &amp;&amp; $(rangeMinInput).val() != '') {
          opts.rangeStartMin = $(rangeMinInput).val();
          opts.rangeStartMax = $(rangeMaxInput).val();
        }
 
        // Insert the slider elements
        $('.subquestions-list', $this).before(
          '<div class="range-slider-wrapper"> \
            <div class="range-slider-min"></div> \
            <div id="range-slider-'+qID+'" class="range-slider" style="width:'+opts.width+'px;"> \
              <div class="range-slider-callout" id="slider-callout-min-'+qID+'"></div> \
              <div class="range-slider-callout" id="slider-callout-max-'+qID+'"></div> \
            </div> \
            <div class="range-slider-max"></div> \
            <div style="clear:both;"></div> \
          </div>'
        );
 
        // Show min/max if option is set
        if(opts.showMax) {
          $('.range-slider-max', $this).text(opts.sliderMax);
        }
        if(opts.showMin) {
          $('.range-slider-min', $this).text(opts.sliderMin);
        }
 
        // Initiate the slider
        var rangeMin;
        var rangeMax;
        if(opts.rangeStartMin == '' || opts.rangeStartMin < opts.sliderMin || opts.rangeStartMin > opts.rangeStartMax) {
          rangeMin = opts.sliderMin+((opts.sliderMax-opts.sliderMin)*0.3333);
        }
        else {
          rangeMin = opts.rangeStartMin;
        }
        if(opts.rangeStartMax == '' || opts.rangeStartMax > opts.sliderMax || opts.rangeStartMax < opts.rangeStartMin) {
          rangeMax = opts.sliderMin+((opts.sliderMax-opts.sliderMin)*0.6667);
        }
        else {
          rangeMax = opts.rangeStartMax;
        }
        $('#range-slider-'+qID).slider({
          range: true,
          min: opts.sliderMin,
          max: opts.sliderMax, 
          values: [ rangeMin, rangeMax ],
          step: opts.step,
          slide: function(event, ui) {
            if((ui.values[1] - ui.values[0]) < opts.minRangeSpan) {
              return false; // Nothing happens if less than minRangeSpan
            }
            $(rangeMinInput).val(ui.values[0]);
            $(rangeMaxInput).val(ui.values[1]);
            $('#slider-callout-min-'+qID).text(ui.values[0]);
            $('#slider-callout-max-'+qID).text(ui.values[1]);
            setTimeout(function() { 
              $('#slider-callout-min-'+qID).css({ 'left':$('.ui-slider-handle:eq(0)', $this).position().left - $('#slider-callout-min-'+qID).outerWidth() - ($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' }).show();
              $('#slider-callout-max-'+qID).css({ 'left':($('.ui-slider-handle:eq(1)', $this).position().left)+($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' }).show();
            }, 10);
          },
          create: function(event, ui) {
            // Initial values and positions
            if($(rangeMinInput).val() != '' &amp;&amp; $(rangeMaxInput).val() != '') { // Pre-existing answer
              $('#slider-callout-min-'+qID).text(opts.rangeStartMin);
              $('#slider-callout-max-'+qID).text(opts.rangeStartMax);
            }
            else if(opts.recordStart &amp;&amp; opts.rangeStartMin &amp;&amp; opts.rangeStartMin &amp;&amp; $(rangeMinInput).val() == '' &amp;&amp; $(rangeMaxInput).val() == '') { // Record the start value (if option is set)
              $(rangeMinInput).val(opts.rangeStartMin);
              $(rangeMaxInput).val(opts.rangeStartMax);
              $('#slider-callout-min-'+qID).text(opts.rangeStartMin);
              $('#slider-callout-max-'+qID).text(opts.rangeStartMax);
            }
            else {
              $('.range-slider-callout', $this).hide();
            } 
            $('#slider-callout-min-'+qID).css({ 'left':$('.ui-slider-handle:eq(0)', $this).position().left - $('#slider-callout-min-'+qID).outerWidth() - ($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' });
            $('#slider-callout-max-'+qID).css({ 'left':($('.ui-slider-handle:eq(1)', $this).position().left)+($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' });
          }
        });
      }
    });
 
  };
})( jQuery );

2) Add these styles to the end of template.css (they are for the default template but easily modified for others):
Code:
.range-slider-question p.tip,
.range-slider-question .subquestions-list {
  display: none;
}
 
.range-slider-wrapper {
  clear: both;
  margin: 10px 0;
  padding-top: 20px;
}
 
.range-slider,
.range-slider-max,
.range-slider-min {
  float: left;
  position: relative;
}
 
.range-slider-max,
.range-slider-min {
  font-size: 0.8em;
  color:#666666;
  line-height: 1.20;
}
 
.range-slider-min {
  margin-right: 5px;
}
 
.range-slider-max {
  margin-left: 5px;
}
 
.range-slider-question .ui-slider-handle {
  top: -4px;
  border-radius: 4px;
}
 
.range-slider-callout {
  position: absolute;
  top: -30px;
  margin: 0;
  min-width: 1.3em;
  padding: 0.1em;
  font-size: 0.9em;
  color:#000000;
  line-height: 1;
  text-align: center;
  background: #F8F8FF;
  border: 1px solid #D2E0F2;
  border-radius: 4px;
}

3) Then, add something like this to the source of your question (I think the comments explain the options adequately)
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    $('#question{QID}').lsRangeSlider({
      sliderMin  :0,  // Minimum slider value (default 0)
      sliderMax  :100,  // Maximum slider value (default 100) 
      rangeStartMin  :20,  // Minimum range handle start value  
      rangeStartMax  :80,  // Maximum range handle start value  
      minRangeSpan  :5,  // Minimum allowed range span 
      step    :1,  // Slider increments (default 1)
      width    :400,  // Width of slider in pixels (default 250)
      recordStart  :true,  // Record the start value? (default no)
      showMin    :true,  // Show slider minimum value? (default no)
      showMax    :true  // Show slider maximum value? (default no)
    });
 
  });
</script>


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 10 years 8 months ago by tpartner.
The topic has been locked.
  • RoMaier
  • RoMaier's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 11 months ago #93985 by RoMaier
Replied by RoMaier on topic How add a double slider in LS???
Thanks for the great answers!

@ DenisChenu
I've very often tried. The double slider is shown but the subquestions are shown as single slider, too. The values will be saved only if I move the slider of the subquestion and not, when I move my double slider. How can I link the subquestion with my slider? I couldn’t create a working script for QQ and START, END!

@ tpartner your proposal looks very great, it didn´t work in my attempt?!
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago #93988 by DenisChenu
Replied by DenisChenu on topic How add a double slider in LS???

RoMaier wrote: @ DenisChenu
I've very often tried. The double slider is shown but the subquestions are shown as single slider, too. The values will be saved only if I move the slider of the subquestion and not, when I move my double slider. How can I link the subquestion with my slider? I couldn’t create a working script for QQ and START, END!

I NEVER say use slider question type .

DON'T USE slider, but a multi numeric question type with 2 sub question

The QCODE is QQ
Then sub question code are START and END


tparner or me can be contcated for professionnal service ;) .

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago - 10 years 11 months ago #93992 by tpartner
Replied by tpartner on topic How add a double slider in LS???

@ tpartner your proposal looks very great, it didn´t work in my attempt?!

Working survey and template attached.

Note that in this demo the text inputs are not hidden so you can see them being loaded.

File Attachment:

File Name: limesurvey...2479.lss
File Size:18 KB

File Attachment:

File Name: Demo_Range_Slider.zip
File Size:75 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 10 years 11 months ago by tpartner.
The topic has been locked.
More
8 years 4 months ago #128229 by indirabth
Replied by indirabth on topic How add a double slider in LS???
Hello,

I'm new to Limesurvey and not very experienced in Javascript.

I tried adding the double slider/range slider. I followed the steps mentioned in manual.limesurvey.org/Workarounds:_Quest...plating#Range_Slider

I created a new survey and then used the Demo_Range_Slider as a template.
I didn't add the code to the template because it appears to have been there already.

When I run the survey, all I got was a textbox and not a range slider.
Even when I tried to tweak the sample survey, all the sliders disappear. There were there when I first run the survey.
I was wondering if anyone had the same problem and how did you solve it?

Best Regards
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose