Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: vertical slider

vertical slider 2 years 5 months ago #107291

  • fvanderstarre
  • fvanderstarre's Avatar
  • Offline
  • Expert Lime
  • Posts: 103
  • Thank you received: 14
  • Karma: 3
I'm sorry but that did not make any difference...?
The administrator has disabled public write access.

vertical slider 2 years 5 months ago #107293

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
Try with these - I have just successfully imported them into a fresh instance of 2.05.

File Attachment:

File Name: Demo_Verti...rs_3.zip
File Size:75 KB


File Attachment:

File Name: limesurvey...1234.lss
File Size:23 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: fvanderstarre

vertical slider 2 years 5 months ago #107299

  • fvanderstarre
  • fvanderstarre's Avatar
  • Offline
  • Expert Lime
  • Posts: 103
  • Thank you received: 14
  • Karma: 3
Great! Thx...
How can I change the slider background color (not the handle but the slider itself)?
The administrator has disabled public write access.

vertical slider 2 years 5 months ago #107304

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
Add something like this to the end of template.css:

.ui-slider.vertical-slider {
	background: none pink;
}
 
.ui-slider.vertical-slider .ui-slider-range {
	background: none red;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

vertical slider 2 years 5 months ago #107907

  • fvanderstarre
  • fvanderstarre's Avatar
  • Offline
  • Expert Lime
  • Posts: 103
  • Thank you received: 14
  • Karma: 3
Now I'd like to make the slider look like a thermometer.
We use a javascript workaround for that in our current setup (1.90), see below and attached image.
I haven't been able to work out how to do it your way though.....
Any help much appreciated!



<script type="text/javascript" charset="utf-8">
var surveyid = 12185;

$(document).ready(function() {
// call the init slider routine for each element of the .multinum-slider class
$(".multinum-slider").each(function(i,e) {
var basename = e.id.substr(10);
$('#slider-'+basename).slider( "option", "range", "min" );
$('#slider-'+basename).slider( "option", "orientation", "vertical" );

var divTag1 = document.createElement("div");
divTag1.id = "slider-range-"+basename;
divTag1.className = "ui-slider-range ui-slider-range-min ui-widget-header";
document.getElementById("slider-"+basename).appendChild( divTag1 );

var divTag2 = document.createElement("div");
divTag2.id = "thermo1";
divTag2.className = "thermo";
divTag2.innerHTML = "<img src=\"/cru/upload/surveys/"+surveyid+"/thermo3.jpg\" alt=\"thermo\" />";
document.getElementById("container-"+basename).appendChild( divTag2 );
})
});
The administrator has disabled public write access.

vertical slider 1 year 6 months ago #117923

  • jcleeland
  • jcleeland's Avatar
  • Offline
  • Moderator Lime
  • Posts: 27
  • Thank you received: 1
  • Karma: 8
I made the following modifications so this would work in 1.91+ (for anyone stuck with a super-old version of LimeSurvey)
// NO EDITING REQUIRED BELOW HERE
 
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
 
	$.fn.lsVerticalSlider = function(options) {  
 
		// The defaults, extended and modified with any passed in the function call
		var opts = $.extend( {
			minValue		:0, 
			maxValue		:100, 
			startValue		:'',
			step			:1,
			height			:150, 
			recordStart		:false,
			showMin			:false,
			showMax			:false
		}, options);
 
		return this.each(function() { 
 
			var $this = $(this);
 
			// Some classes for the question and sub-questions
			$this.addClass('vertical-slider-question');
			$('li', $this).addClass('vertical-slider-sub-question');
 
			// Loop through the sub-questions
			$('li', $this).each(function(i){
 
				//Get the ID for this answer
				//var firstInput = $(this).find("input:first-child");
				var itemID = $(this).find("input:first-child").attr('id').replace(/answer/, '');
				// Check for pre-existing answer
				if($('#answer'+itemID).val() != '') {
					opts.startValue = $('#answer'+itemID).val();
				}
 
				// Insert the slider elements
				$('#answer'+itemID).after(
					'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
						<div class="vertical-slider-max"></div> \
						<div class="vertical-slider-min"></div> \
					</div> \
					<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
					<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
						<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
					</div>'
				);
 
				// Show min/max if option is set
				if(opts.showMax) {
					$('.vertical-slider-max', $this).text(opts.maxValue);
				}
				if(opts.showMin) {
					$('.vertical-slider-min', $this).text(opts.minValue);
				}
 
				// Initiate the slider
				$('#vertical-slider-'+itemID).slider({
					orientation: 'vertical',
					range: 'min',
					min: opts.minValue,
					max: opts.maxValue,
					value: opts.startValue,
					step: opts.step,
					slide: function(event, ui) {
						$('#answer'+itemID).val(ui.value);
						$('#slider-callout-'+itemID).text(ui.value);
						setTimeout(function() { 
							$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
						}, 10);
					},
					create: function(event, ui) {
						// Initial values and positions
						if($('#answer'+itemID).val() != '') { // Pre-existing answer
							$('#slider-callout-'+itemID).text(opts.startValue);
						}
						else if(opts.recordStart) { // Record the start value (if option is set)
							$('#answer'+itemID).val(opts.startValue);
							$('#slider-callout-'+itemID).text(opts.startValue);
						}
						else {
							$('#slider-callout-'+itemID).hide();
						}
						$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
					}
				});
			});
		});
 
	};
})( jQuery );
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.228 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form