- Posts: 3
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
9 years 2 months ago #116073
by BuntyHardcastle
Changing Slider Callout font color by Slider input was created 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!
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
- Offline
- Official LimeSurvey Partner
9 years 2 months ago #116077
by Mazi
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
Replied by Mazi on topic Changing Slider Callout font color by Slider input
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
9 years 2 months ago - 9 years 2 months ago #116093
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Changing Slider Callout font color by Slider input
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:
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
- Offline
- Official LimeSurvey Partner
9 years 2 months ago #116098
by Mazi
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
Replied by Mazi on topic Changing Slider Callout font color by Slider input
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
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.
Replied by tpartner on topic Changing Slider Callout font color by Slider input
Workaround added -
manual.limesurvey.org/Workarounds:_Quest...ider_Call-Out_Styles
.
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13907
- Thank you received: 2546
9 years 2 months ago - 9 years 2 months ago #116200
by DenisChenu
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.
Replied by DenisChenu on topic Changing Slider Callout font color by Slider input
Hi Tony,
I think it's more robust ? No ?
PS: thank you Tony !
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.
Code:
$( ".selector" ).on( "slide", function( event, ui ) {} );
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
9 years 2 months ago - 9 years 2 months ago #116265
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Changing Slider Callout font color by Slider input
Yes, I suppose it would be.I think it's more robust ? No ?
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.