Welcome, Guest
Username: Password: Remember me

TOPIC: How add a double slider in LS???

How add a double slider in LS??? 2 years 5 months ago #93627

  • RoMaier
  • RoMaier's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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 administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93630

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 3735
  • Thank you received: 501
  • Karma: 163
You'll probably have to join two different questions as described in this workaround:

docs.limesurvey.org/Workarounds%3A+Quest...stion_types_in_array
Have a look at the manual! It is a really valuable source for information. Here some helpful links:
Manual (EN) | Question Types | Question Attributes | Workarounds

If you found this answer helpful and it saved you some time please consider a donation to the project to keep Limesurvey going!
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93635

  • RoMaier
  • RoMaier's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Oky thanks, so I should make an extra question for each controller and connect both?
Attachments:
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93668

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7510
  • Thank you received: 1024
  • Karma: 297
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
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93679

  • RoMaier
  • RoMaier's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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: 2 years 5 months ago by DenisChenu. Reason: js tag
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93681

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7510
  • Thank you received: 1024
  • Karma: 297
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
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93686

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5111
  • Thank you received: 1049
  • Karma: 440
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>

This message has an attachment image.
Please log in or register to see it.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 2 months ago by tpartner.
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93985

  • RoMaier
  • RoMaier's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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 administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93988

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7510
  • Thank you received: 1024
  • Karma: 297
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 ;) .
The administrator has disabled public write access.

How add a double slider in LS??? 2 years 5 months ago #93992

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5111
  • Thank you received: 1049
  • Karma: 440
@ 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

This message has attachments files.
Please log in or register to see it.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 5 months ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.194 seconds