- Posts: 117
- Thank you received: 9
Ask the community, share ideas, and connect with other LimeSurvey users!
Please Log in to join the conversation.
You will need to hide the core tooltips via CSS and insert custom tooltips via JavaScript. Although I have several examples of this in the forums, in this case it is complicated by the fact that the sliders are manipulated by the question theme so we need to integrate it with that code.I'm using the Van Westerndorp pricing question from TPartner with 4 sliders ranging from £0.99 to £24.99 with a step value of 0.1
Is it possible to format the value shown in the slider callout to always show the £ sign and the value to 2 decimal places? At the moment £3.10 is shown as 3.1
<style type="text/css" data-author="Tony Partner"> #question{QID} .tooltip-inner:nth-child(2) { display: none !important } </style>
function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } function initPricingSliders(qID, randomOrder) { var thisQuestion = $('#question'+qID); $(thisQuestion).addClass('with-pricing-sliders'); // Add some attributes var itemIndexes = []; $('.question-item', thisQuestion).each(function(i) { $(this).attr('data-ps-item', (i+1)); $('.ps-slider-input', this).attr('data-ps-slider-index', (i+1)); itemIndexes.push((i+1)); }); // Random answers? if(randomOrder == '1') { shuffleArray(itemIndexes); $(itemIndexes).each(function(i, val) { $('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-ps-item="'+val+'"]', thisQuestion)); }); } // A function to insert custom slider tooltips function insertTooltips(thisRow) { var tipPrefix = '&#163;'; // UK pound symbol var psSeparator = $(':text[id$="slid"]', thisRow).attr('data-ps-separator'); $('li.answer-item', thisQuestion).each(function(i) { $('.inserted-tip', this).remove(); var thisVal = Number($(':text.form-control:eq(0)', this).val().replace(psSeparator, '.')); $('.tooltip', this).append('<div class="tooltip-inner inserted-tip">'+tipPrefix+thisVal.toFixed(2).replace(/\./, psSeparator)+'</div>'); }); } // Initially insert the custom slider tooltips insertTooltips(); function psHandleSliders(el) { $('body').off('slide.ps slideStop.ps', '#question'+qID+' .ps-slider-input'); var psSeparator = $(el).attr('data-ps-separator'); var psStep = $(el).attr('data-ps-step'); var sliderVal = Number($(el).val().replace(psSeparator, '.')); var movedIndexNum = $(el).attr('data-ps-slider-index'); var lowerSliders = $('.ps-slider-input', thisQuestion).filter(function() { return $(this).attr('data-ps-slider-index') < movedIndexNum; }); var higherSliders = $('.ps-slider-input', thisQuestion).filter(function() { return $(this).attr('data-ps-slider-index') > movedIndexNum; }); // Handle the higher and lower slider positions $(lowerSliders).each(function(i) { var thisVal = Number($(this).val().replace(psSeparator, '.')); var thisIndexNum = $(this).attr('data-ps-slider-index'); var newSliderVal = sliderVal-((movedIndexNum*psStep)-(thisIndexNum*psStep)); if(thisVal > newSliderVal) { psMoveSlider($(this), newSliderVal); } }); $(higherSliders).each(function(i) { var thisVal = Number($(this).val().replace(psSeparator, '.')); var thisIndexNum = $(this).attr('data-ps-slider-index'); var newSliderVal = sliderVal+((thisIndexNum*psStep)-(movedIndexNum*psStep)); if(thisVal < newSliderVal) { psMoveSlider($(this), newSliderVal); } }); // Update the custom slider tooltips insertTooltips(); function psMoveSlider(el, newSliderVal) { // Move the slider var thisName = $(el).attr('name').replace('slid', ''); window.activeSliders['s'+thisName].getSlider().setValue(newSliderVal); // Handle the inputs var displayValue = $(el).val().toString().replace('.', psSeparator); $(el).val(displayValue); $(el).closest('li.answer-item').find('input.em_sq_validation').val(displayValue); // Fire Expression Manager ExprMgr_process_relevance_and_tailoring('keyup', thisName, 'change'); } $('body').on('slide.ps slideStop.ps', '#question'+qID+' .ps-slider-input', function(event) { psHandleSliders($(this)); }); } $('body').on('slide.ps slideStop.ps', '#question'+qID+' .ps-slider-input', function(event) { psHandleSliders($(this)); }); }
This is the expected behaviour. The slider step interval is 0.1 so the slider is always moved to the nearest step.I have also set the initial value to 0.99 but it shows as 1 on the callout when the page first loads.
Please Log in to join the conversation.
Please Log in to join the conversation.