Welcome to the LimeSurvey Community Forum

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

Changing Slider Callout font color by Slider input

  • BuntyHardcastle
  • BuntyHardcastle's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
9 years 2 months ago #116073 by BuntyHardcastle
Hello!

Was wondering if anyone could help with this?

I've got a slider question - and I want the color of the callout font to change depending on the range the slider is sitting in.

My slider goes 1-80, so if the slider was sitting in the 1-20 range, I'd want the callout font color to be red, 21-40 - font would be orange, 41-60 it would be yellow and 61-80 it would be green.

I want this to work as you move the slider around.

Any help much appreciated!
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
9 years 2 months ago #116077 by Mazi
This can only be done using JavaScript. You need to check for the current value on change and assign the related CSS: api.jquery.com/css/

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago - 9 years 2 months ago #116093 by tpartner
You can override the .slide() function of the slider and modify the color of the callout depending on the value.

Set up your survey to use JavaScript and place the following script in the source of the question:

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>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 2 months ago by tpartner.
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
9 years 2 months ago #116098 by Mazi
Great solution, Tony. Can you copy that to the manual so that it doesn't get lost?

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago #116110 by tpartner

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • BuntyHardcastle
  • BuntyHardcastle's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
9 years 2 months ago #116199 by BuntyHardcastle
Replied by BuntyHardcastle on topic Changing Slider Callout font color by Slider input
Thank you - it works a treat!
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago - 9 years 2 months ago #116200 by DenisChenu
Hi Tony,

tpartner wrote: You can override the .slide() function of the slider and modify the color of the callout depending on the value.

I think we can add fnction on slide, and not replacing.
Code:
$( ".selector" ).on( "slide", function( event, ui ) {} );
I think it's more robust ? No ?

PS: thank you Tony !

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Last edit: 9 years 2 months ago by DenisChenu.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago - 9 years 2 months ago #116265 by tpartner

I think it's more robust ? No ?

Yes, I suppose it would be.

Code:
<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>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 2 months ago by tpartner.
The following user(s) said Thank You: DenisChenu
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose