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 = '£'; // 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.
