Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// 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 thisValue = ui.value.toString().replace(/\./,LSvar.sLEMradix);
// Load the callout
$('.slider_callout', thisRow).text(thisValue);
// Set the data value
$('input.text', thisRow).val(thisValue);
$('input.text', thisRow).triggerHandler("keyup");
handleCallout(thisRow, thisValue);
});
// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});
// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}
});
</script>