- Posts: 5
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
11 years 1 month 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11660
- Thank you received: 2742
11 years 1 month ago #93630
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
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
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
11 years 1 month 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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13647
- Thank you received: 2491
11 years 1 month ago #93668
by DenisChenu
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.
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:
DSenis
Think best is to do a "multi numeric" simle question (without included slider) and use you own script to:
- Hide the LS answer
- Use slider.range from jquery jqueryui.com/slider/#range and put this in question text or answer part.
- 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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
11 years 1 month ago - 11 years 1 month 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
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!
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 1 month ago by DenisChenu. Reason: js tag
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13647
- Thank you received: 2491
11 years 1 month ago #93681
by DenisChenu
1st : remove
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
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.
Replied by DenisChenu on topic How add a double slider in LS???
It's not trivial.RoMaier wrote: I'm sorry if this is trivial, but I am really new here
1st : remove
Code:
<script src="scripts/jquery/jquery-ui-1.10.1.custom.js"></script>
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10110
- Thank you received: 3593
11 years 1 month ago - 10 years 9 months ago #93686
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 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:
2) Add these styles to the end of template.css (they are for the default template but easily modified for others):
3) Then, add something like this to the source of your question (I think the comments explain the options adequately)
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') && $('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() != '' && $(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() != '' && $(rangeMaxInput).val() != '') { // Pre-existing answer $('#slider-callout-min-'+qID).text(opts.rangeStartMin); $('#slider-callout-max-'+qID).text(opts.rangeStartMax); } else if(opts.recordStart && opts.rangeStartMin && opts.rangeStartMin && $(rangeMinInput).val() == '' && $(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.
Attachments:
Last edit: 10 years 9 months ago by tpartner.
The topic has been locked.
- RoMaier
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
11 years 1 month 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?!
@ 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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13647
- Thank you received: 2491
11 years 1 month ago #93988
by DenisChenu
DON'T USE slider, but a multi numeric question type with 2 sub question
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.
Replied by DenisChenu on topic How add a double slider in LS???
I NEVER say use slider question type .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!
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10110
- Thank you received: 3593
11 years 1 month ago - 11 years 1 month ago #93992
by tpartner
Note that in this demo the text inputs are not hidden so you can see them being loaded.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic How add a double slider in LS???
Working survey and template attached.@ tpartner your proposal looks very great, it didn´t work in my attempt?!
Note that in this demo the text inputs are not hidden so you can see them being loaded.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 11 years 1 month ago by tpartner.
The topic has been locked.
- indirabth
- Offline
- New Member
Less
More
- Posts: 4
- Thank you received: 0
8 years 5 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
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.