Slider Didn't work in Array (Number)

More
5 months 3 weeks ago - 5 months 3 weeks ago #153314 by nadirazakiya
nadirazakiya created the topic: Slider Didn't work in Array (Number)
Hello guys.. I want to make slider with array (number) based on this link manual.limesurvey.org/Workarounds:_Quest...y-Dual-Scale-Numbers . The lsg file is attached. But the problem is the slider could not show. Anyone can help me?

Thank you.

Sorry my english is bad.
Attachments:
Last Edit: 5 months 3 weeks ago by nadirazakiya.

Please Log in to join the conversation.

More
5 months 3 weeks ago #153325 by tpartner
tpartner replied the topic: Slider Didn't work in Array (Number)
As stated, that workaround is only tested in version 2.05. What version are you using?

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

Please Log in to join the conversation.

More
5 months 3 weeks ago #153371 by nadirazakiya
nadirazakiya replied the topic: Slider Didn't work in Array (Number)
I'm using version 2.64.7

Please Log in to join the conversation.

More
5 months 3 weeks ago #153402 by tpartner
tpartner replied the topic: Slider Didn't work in Array (Number)
Here is a workaround for version 2.6x.

Place this JavaScript in the question source:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		insertSlider ({QID});
 
		function insertSlider (qID) {
 
			// Identify this question
			var thisQuestion = $('#question'+qID);
			thisQuestion.addClass('with-dropdown-sliders');
 
			// Loop through all array drop-downs
			$('select.multiflexiselect', thisQuestion).each(function(i, el){
				var thisCell = $(el).closest('td');
 
				// Hide the dropdown
				$(el).hide();
 
				// Some dropdown values
				var currentVal = $(el).val();
				var firstVal = Number($('option[value!=""]:first', el).attr('value'));
				var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
				var lastVal = Number($('option[value!=""]:last', el).attr('value'));
 
				// Insert an input for the slider
				var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);
 
				// Initiate the slider
				thisInput.val(currentVal).bootstrapSlider({
					'min': firstVal,
					'max': lastVal,
					'step': secondVal - firstVal,
					'value': Number(currentVal),
					'tooltip': 'always'
				});
 
				// Listener on the slider
				$(thisInput).on('slideStop', function () {
					if($('.tooltip', thisCell).is(':hidden')) {
						$('.tooltip', thisCell).show();
						$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
					}
					$(el).val($(thisInput).val());
				});
 
				// Hide the slider call-out if no value selected yet
				if(currentVal == '') {
					$('.tooltip', thisCell).hide();
				}
			});
		}
	});
</script>

Place something like this at the end of template.css:
.with-dropdown-sliders .slider.slider-horizontal {
    margin: 1.5em auto  1em auto;
    width: 90%;
}
 
.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
    margin-top: -5px;
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: nadirazakiya

Please Log in to join the conversation.

More
5 months 3 weeks ago #153442 by nadirazakiya
nadirazakiya replied the topic: Slider Didn't work in Array (Number)
Hi Tony,
That's so cool,
I've implemented your code and it's work great.

Thank you very much.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now