Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

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

How add a double slider in LS??? 1 Jahr 6 Monate her #93627

  • RoMaier
  • RoMaiers Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 6 Monate her #93630

  • holch
  • holchs Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 2662
  • Dank erhalten: 318
  • Karma: 119
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!
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 6 Monate her #93635

  • RoMaier
  • RoMaiers Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 12
  • Karma: 0
Oky thanks, so I should make an extra question for each controller and connect both?
Anhang:
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 6 Monate her #93668

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6311
  • Dank erhalten: 809
  • Karma: 241
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 6 Monate her #93679

  • RoMaier
  • RoMaiers Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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!
Letzte Änderung: 1 Jahr 6 Monate her von DenisChenu. Begründung: js tag
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 6 Monate her #93681

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6311
  • Dank erhalten: 809
  • Karma: 241
RoMaier schrieb:
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 6 Monate her #93686

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4182
  • Dank erhalten: 784
  • Karma: 359
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>

Capture2_2013-03-13.JPG
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.
Letzte Änderung: 1 Jahr 2 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 5 Monate her #93985

  • RoMaier
  • RoMaiers Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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?!
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 5 Monate her #93988

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6311
  • Dank erhalten: 809
  • Karma: 241
RoMaier schrieb:
@ 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 ;) .
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How add a double slider in LS??? 1 Jahr 5 Monate her #93992

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4182
  • Dank erhalten: 784
  • Karma: 359
@ 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.

Dateianhang:

Dateiname: limesurvey_survey_812479.lss
Dateigröße: 18 KB

Dateianhang:

Dateiname: Demo_Range_Slider.zip
Dateigröße: 75 KB
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.
Letzte Änderung: 1 Jahr 5 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.259 Sekunden
Donation Image