Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Format slider callouts to show 2 decimals and a £ sign

  • paulfiner
  • paulfiner's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
2 years 7 hours ago #239942 by paulfiner
Please help us help you and fill where relevant:
Your LimeSurvey version: 3.25
Own server or LimeSurvey hosting: Own
Survey theme/template: Extended Fruity
==================
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
I have also set the initial value to 0.99 but it shows as 1 on the callout when the page first loads.
Thanks

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 11 months ago #239964 by tpartner

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

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.

1) Hide the core tooltips - place this CSS in the question source:

Code:
<style type="text/css" data-author="Tony Partner">
 
  #question{QID} .tooltip-inner:nth-child(2) { 
    display: none !important
  }  
 
</style>

2) Insert custom tooltips - replace the contents of the question theme pricingSliders.js file with this (you will probably want to do this in a copy of the question theme):

Code:
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 = '&amp;#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));
  });
}

I have also set the initial value to 0.99 but it shows as 1 on the callout when the page first loads.

This is the expected behaviour. The slider step interval is 0.1 so the slider is always moved to the nearest step.

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.

  • paulfiner
  • paulfiner's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 11 months ago #240006 by paulfiner
Sorry for the late reply Tony and thanks so much for the solution. I haven’t had time to implement it yet but will do this weekend.
Cheers,
Paul

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose