- Posts: 2
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Add tick marks and extra label to slider of multiple numerical input question)
- bottleneck
- Topic Author
- Offline
- New Member
Less
More
4 years 3 weeks ago #195792
by bottleneck
Add tick marks and extra label to slider of multiple numerical input question) was created by bottleneck
Hello,
I would like to change the appearance of the multiple numerical input question slider as follows
I am using a hosted version of LimeSurvey 3.15.1. Due to the policies of the hosting service I cannot change the .css or .js templates.
I have tried to include the following code.
It adds a nice but unintended extra slider to my questions.
Where can I insert the code and how do I adjust it to change the look of my slider?
Thank you!
Best wishes
I would like to change the appearance of the multiple numerical input question slider as follows
- I want to insert a label in the middle of the scale.
- I would like to place a checkmark every 20 units on a scale from 0 to 200.
I am using a hosted version of LimeSurvey 3.15.1. Due to the policies of the hosting service I cannot change the .css or .js templates.
I have tried to include the following code.
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete', function() { var thisQuestion = $( '#question{QID}'); $(thisQuestion).slider({ ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200], ticks_labels: ['Label left', '', '', '', '', 'Label mid', '', '', '', '', 'Label right'], ticks_snap_bounds: 20, }); }); </script>
Where can I insert the code and how do I adjust it to change the look of my slider?
Thank you!
Best wishes
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
4 years 3 weeks ago - 4 years 3 weeks ago #195814
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 Add tick marks and extra label to slider of multiple numerical input question)
Try this...
JavaScript
CSS
Sample survey attached:
JavaScript
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var ticksArray = [ [0, 'Label left'], [20, ''], [40, ''], [60, ''], [80, ''], [100, 'Label mid'], [120, ''], [140, ''], [160, ''], [180, ''], [200, 'Label right'], ]; insertSliderTicks('{QID}', ticksArray); }); /* Insert Slider Tick Marks */ function insertSliderTicks(qID, ticksArray) { var thisQuestion = $('#question'+qID); $(thisQuestion).addClass('with-inserted-ticks'); $('input:text', thisQuestion).on('slideEnabled',function(){ var thisSlider = $(this); var thisItem = $(thisSlider).closest('li'); var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin'); var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax'); var thisRange = thisMax - thisMin; $.each(ticksArray, function(i, val) { var tickRelativePosition = val[0] - thisMin; var tickPercent = (tickRelativePosition/thisRange)*100; // Insert tick marks $('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\ <div class="tick-text">'+val[1]+'</div>\ </div>'); }); }); } </script>
CSS
Code:
<style type="text/css"> /* Slider Tick Marks */ @media only screen and (min-width: 768px) { .with-inserted-ticks .slider-container { padding-right: 50px; padding-left: 50px; } } .with-inserted-ticks .slider-item { margin-bottom: 50px; } .with-inserted-ticks .slider-container .help-block { margin: 25px 0 0 -20px; width: 40px; text-align: center; } .with-inserted-ticks .slider-container .help-block.pull-right { margin: 25px -20px 0 0; } .inserted-tick { position: absolute; top: 50%; height: 10px; width: 2px; margin-top: -5px; margin-left: -1px; background-color: #DDDDDD; } .inserted-tick.left-0, .inserted-tick.left-100 { background-color: transparent; } .inserted-tick .tick-text { position: absolute; top: 150%; width: 100px; margin-left: -50px; color: #000000; text-align: center; } @media only screen and (max-width: 768px) { .inserted-tick.left-0 .tick-text { margin-left: 0px; text-align: left; } .inserted-tick.left-100 .tick-text { margin-left: -100px; text-align: right; } } </style>
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 4 years 3 weeks ago by tpartner.
The following user(s) said Thank You: bottleneck
The topic has been locked.
- bottleneck
- Topic Author
- Offline
- New Member
Less
More
- Posts: 2
- Thank you received: 0
4 years 3 weeks ago #195841
by bottleneck
Replied by bottleneck on topic Add tick marks and extra label to slider of multiple numerical input question)
Best thanks, the solution works great! You made my day.
The topic has been locked.