How add a double slider in LS???

More
4 years 6 months ago #93627 by RoMaier
RoMaier created the topic: How add a double slider in LS???
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

Please Log in to join the conversation.

More
4 years 6 months ago #93630 by holch
holch replied the 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'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
4 years 6 months ago #93635 by RoMaier
RoMaier replied the topic: How add a double slider in LS???
Oky thanks, so I should make an extra question for each controller and connect both?
Attachments:

Please Log in to join the conversation.

More
4 years 6 months ago #93668 by DenisChenu
DenisChenu replied the 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 6 months ago - 4 years 6 months ago #93679 by RoMaier
RoMaier replied the 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
<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: 4 years 6 months ago by DenisChenu. Reason: js tag

Please Log in to join the conversation.

More
4 years 6 months ago #93681 by DenisChenu
DenisChenu replied the 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
<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
$("#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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 6 months ago - 4 years 2 months ago #93686 by tpartner
tpartner replied the 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:
// 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):
.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)
<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: 4 years 2 months ago by tpartner.

Please Log in to join the conversation.

More
4 years 6 months ago #93985 by RoMaier
RoMaier replied the 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?!

Please Log in to join the conversation.

More
4 years 6 months ago #93988 by DenisChenu
DenisChenu replied the 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 6 months ago - 4 years 6 months ago #93992 by tpartner
tpartner replied the 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.
Attachments:
Last Edit: 4 years 6 months ago by tpartner.

Please Log in to join the conversation.

More
1 year 10 months ago #128229 by indirabth
indirabth replied the 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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now