Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

To modify the slider handle shape (multiple numerical input question type)

  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 11 months ago #168480 by Albinux
To modify the slider handle shape (multiple numerical input question type) was created by Albinux
Hi everyone,

First of all, I would like to thank all the active members of this forum for their valuable work.

My LimeSurvey version is 2.72.6+171207.

In the question type "multiple numerical input", it is possible to use a continuum with a cursor/slider. By default, this slider can take three different shapes: a circle, a square or a triangle. There is also an option "custom". When I check this option, I get a little man-shaped slider instead of the three other shapes mentioned above.

What I would like is to have a short vertical line as a slider.


Do you know what I have to do to get such a slider ?

Thank you very much in advance.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 11 months ago - 6 years 11 months ago #168529 by Joffm
Replied by Joffm on topic To modify the slider handle shape (multiple numerical input question type)
My idea,
use the "square" and
1. minimize the width.
2. adapt the position of tooltip

So put this at the end of your "template,css"
Code:
.slider-handle {
    height:28px;
    width:2px;
/* Change the color if desired
    background-color: #C18D00;
    background-image: -webkit-linear-gradient(top, #C18D00 0%, #C18D00 100%);
    background-image: -o-linear-gradient(top, #C18D00 0%, #C18D00 100%);
    background-image: linear-gradient(to bottom, #C18D00 0%, #C18D00 100%);
*/    
}
.slider .tooltip.tooltip-main {
    margin-left:-20px !important;
  }



To hide the tooltip add:
Code:
.slider .tooltip.top {
    display: none !important;
}
.slider .tooltip-main .top {
        display: none !important;
}

Best regards
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 6 years 11 months ago by Joffm.
The following user(s) said Thank You: Albinux
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 11 months ago #168530 by Albinux
Replied by Albinux on topic To modify the slider handle shape (multiple numerical input question type)
Hello Joffm,

Your idea fits perfectly, thank you very much!

However, two small problems are emerging:

1) The slider is not centered vertically with the horizontal continuum (it is slightly too low).
I solved the problem by adding top: -0.30em; to the portion of code you suggested:
Code:
.slider-handle {
    height:28px;
    width:4px;
    top: -0.30em;
/* Change the color if desired
    background-color: #C18D00;
    background-image: -webkit-linear-gradient(top, #C18D00 0%, #C18D00 100%);
    background-image: -o-linear-gradient(top, #C18D00 0%, #C18D00 100%);
    background-image: linear-gradient(to bottom, #C18D00 0%, #C18D00 100%);
*/    
}

2) The initial position of the slider is slightly shifted to the left from the start of the horizontal continuum. The slider is therefore outside the horizontal continuum. Furthermore, it is not possible to move the slider to the right end of the continuum. The slider stops slightly to the left of this end.
Concerning this problem, I did not find the code to add to fix it.
Do you still have a good idea in stock? :)
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 11 months ago #168532 by Joffm
Replied by Joffm on topic To modify the slider handle shape (multiple numerical input question type)
Hi, albinux,
you have to adapt the css, of course.
Use a webdeveloper tool which is included in your webbrowser and examine and change the values.

But there are two more options.

1. The very easy way:
Use the "custom" option. Here you enter the code of the fontawesome icon. astronautweb.co/snippet/font-awesome/
Only the four characters "f...".



2. The more sophisticated way:
Use this script. You have to create your own png.
www.limesurvey.org/forum/design-issues/1...liders-design#161148



Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: tpartner, Albinux
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 11 months ago #168555 by Albinux
Replied by Albinux on topic To modify the slider handle shape (multiple numerical input question type)

you have to adapt the css, of course.
Use a webdeveloper tool which is included in your webbrowser and examine and change the values.


This is the way I chose. This way led me to add to the template.css file the following line of code: margin-left: -0.10em !important;. More specifically, I included it in the code portion cited in my previous message:
Code:
.slider-handle {
    height: 28px;
    width: 4px;
    top: -0.30em;
    margin-left: -0.10em !important;
}

And it works perfectly! :)

Thank you again Joffm !

Best regards

Albinux
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source