- Posts: 3
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<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>
I think we can add fnction on slide, and not replacing.tpartner wrote: You can override the .slide() function of the slider and modify the color of the callout depending on the value.
$( ".selector" ).on( "slide", function( event, ui ) {} );
Yes, I suppose it would be.I think it's more robust ? No ?
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); // Slide function $('.ui-slider', thisQuestion).on('slide', function( event, ui ) { handleCallout($(this).closest('li.answer-item'), ui.value); }); // 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>