There is no "reverse slide" functionality for the jQuery UI slider but it can be mimicked by replacing the
slide function and subtracting the slider value from the slider maximum.
Of course, we would also need to handle things like the show-min, show-max, steps, and decimal places in the accuracy.
So, here's a quick workaround with the following caveats:
- Developed for LS 2.05
- Only tested in IE7-10, Firefox and Chrome
- The "Reset" button will not work
1) Add the following function to the end of
template.js:
Code:
function reverseSlider(qID) {
// Identify the question
var thisQuestion = $('#question'+qID);
//$('span.input', thisQuestion).show() // un-comment this to debug
// Reverse the min/max displays
$('.answer-item', thisQuestion).each(function(i) {
var showMinText = $('.slider-showmin', this).text();
var showMaxText = $('.slider-showmax', this).text();
$('.slider-showmin', this).text(showMaxText);
$('.slider-showmax', this).text(showMinText);
});
// Initial slider positions
$('span.input input[type="text"]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('li.answer-item');
var thisSlider = $('.ui-slider', thisRow);
var sliderValue = $(thisSlider).slider('option', 'max')+$(thisSlider).slider('option', 'min')-$(this).val();
$('.ui-slider', thisRow).slider('option', 'value', sliderValue);
$('.slider-callout', thisRow).text($(this).val());
}
});
// New slide function
$('.ui-slider', thisQuestion).slider( 'option', 'slide', function(event, ui) {
// Define a few vars
var thisRow = $(this).closest('li.answer-item');
var thisSlider = $(this);
var step = $(thisSlider).slider('option', 'step').toString();
var stepDecimals = '';
if(step.indexOf('.') != -1) {
stepDecimals = step.length - (step.indexOf('.')+1);
}
var reverseValue = '';
// Calculate the "reverse" value
if(ui.value > $(thisSlider).slider('option', 'max')) {
reverseValue = $(thisSlider).slider('option', 'min');
}
else if(ui.value < $(thisSlider).slider('option', 'min')) {
reverseValue = $(thisSlider).slider('option', 'max');
}
else if(stepDecimals > 0) { // Handle decimal places
reverseValue = ($(thisSlider).slider('option', 'max')+$(thisSlider).slider('option', 'min')-ui.value).toFixed(stepDecimals);
}
else{
reverseValue = $(thisSlider).slider('option', 'max')+$(thisSlider).slider('option', 'min')-ui.value;
}
reverseValue = reverseValue.toString();
reverseValue = reverseValue.replace(/\./,LSvar.sLEMradix);
// Load the callout
$('.slider_callout', thisRow).text(reverseValue);
// Set the data value
$('input.text', thisRow).val(reverseValue);
$('input.text', thisRow).triggerHandler("keyup");
});
}
2) Add this script to the source of every question you want to "reverse":
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
reverseSlider({QID});
});
</script>
Topic Author
