- Posts: 10109
- Thank you received: 3595
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
How to use Vertical Silder
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
3 weeks 2 days ago #259808
by tpartner
1) Add this JavaScript to the question source:
2) Add this CSS to the question source:
Sample survey:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic How to use Vertical Silder
Can you show the this slider answer option will be show at bottom poisition
1) Add this JavaScript to the question source:
Code:
<script type="text/javascript" data-author="Tony Partner"> $(document).on('ready pjax:scriptcomplete',function(){ // Move the slider labels $('#question{QID} .ls-slider-item-row').each(function(i) { $('label', this).insertAfter($('> div:eq(0)', this)); }); }); </script>
2) Add this CSS to the question source:
Code:
<style type="text/css" data-author="Tony Partner"> @media (max-width: 768px) { #question{QID} .answer-container li > div > div label { margin: 1.5em 0; } } @media only screen and (min-width: 768px) { #question{QID} .answer-container .row { margin: 0; } #question{QID} .answer-container ul { display: grid; grid-auto-flow: column; grid-gap: 3px; } #question{QID} .answer-container li { display: block; padding: 0; border: 1px solid #e7e7e7; } #question{QID} .answer-container li > div > div label { display: block; margin: 0 0 0.5em; width: 100%; text-align: center; padding: 0; } #question{QID} .answer-container li > div > div > div { width: 100%; text-align: center; padding: 0 !important; margin-top: 1.5em; } #question{QID} .answer-container .ls-slider-answer-row { margin: 0; width: 100%; } #question{QID} .answer-container .slider.slider-vertical { margin-bottom: 1em; } } </style>
Sample survey:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Please Log in to join the conversation.
- rajkumar_dms
- Offline
- Senior Member
Less
More
- Posts: 42
- Thank you received: 0
3 weeks 2 days ago #259813
by rajkumar_dms
Replied by rajkumar_dms on topic How to use Vertical Silder
Hi,
Can you move slider bottom to top but now it's top to bottom
Can you move slider bottom to top but now it's top to bottom
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
3 weeks 2 days ago #259815
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 How to use Vertical Silder
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Please Log in to join the conversation.
- rajkumar_dms
- Offline
- Senior Member
Less
More
- Posts: 42
- Thank you received: 0
3 weeks 2 days ago #259817
by rajkumar_dms
Replied by rajkumar_dms on topic How to use Vertical Silder
i had made the same but my concern is when i revers it then soild fill also reverse
but i need if move slider bottom to top the solid fill also fill but it now if siler move to top to bottom then solid filed up
but i need if move slider bottom to top the solid fill also fill but it now if siler move to top to bottom then solid filed up
Please Log in to join the conversation.
- Joffm
- Topic Author
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12940
- Thank you received: 3979
3 weeks 2 days ago #259820
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic How to use Vertical Silder
Always investigate with the webdevelopment tool of your browser (F12)
Here you see what you may change.
Reverse the colors of the slider.
Like
Here you see what you may change.
Reverse the colors of the slider.
Like
Code:
.fruity .slider-selection { background-image: linear-gradient(0deg,#f7f7f7,#f7f7f7) } .slider-track-high { background-color: red; } .slider-untouched .slider-track-high { background-color: #f7f7f7; }
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.