Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Getting the sliderhandle to stay within the "sliderlane"

Getting the sliderhandle to stay within the "sliderlane" 4 years 1 month ago #87782

  • adishardis
  • adishardis's Avatar
  • Offline
  • Premium Lime
  • Posts: 69
  • Karma: 0
Hi,

the default behaviour of the jquery ui slider handle is to have its middle at the edge of the "sliderlane". I however want the entire handle to stay within the lane at the endpoints.

Here (stackoverflow.com/questions/3707228/jque...-handle-modification)is a suggestion on how to solve it but I am not sure on how implement it in Limesurvey. :-/

Anyone got any suggestions?

Take care
Adam
The administrator has disabled public write access.

Getting the sliderhandle to stay within the "sliderlane" 4 years 1 month ago #87837

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9600
  • Thank you received: 1376
  • Karma: 390
Hello,

Think you can use a multi numeric question type (without slider) and use your own slider launcher ith you own option and css.

LS inclde jquery, and included parameters use jquery, but sometimes is best to use your own jquery script :)
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (use private message).
The administrator has disabled public write access.

Getting the sliderhandle to stay within the "sliderlane" 4 years 1 month ago #87852

  • adishardis
  • adishardis's Avatar
  • Offline
  • Premium Lime
  • Posts: 69
  • Karma: 0
Here's what I did, don't know if it's the best solution but it seems to do the job!

A warning though, I got som errors regarding em-manager for some reason but It dissapeared when I logged out and logged in again, but If someone knows why this solution is the wrong way to do it let me know!

To change the Multi-numerical slider I inserted an extra div <div id=myslider> in limesurvey/application/helpers/qanda_helper.php in line 3452 just before <div id=\"slider-$myfname\" class=\"ui-slider-1\">.

Code display:
                . "<div id=\"MySlider\" /><div id=\"slider-$myfname\" class=\"ui-slider-1\">\n"
                .  $slider_showmin
                . "<div class=\"slider_callout\" id=\"slider-callout-$myfname\"></div>\n"
                . "<div class=\"ui-slider-handle\" id=\"slider-handle-$myfname\"></div>\n"
                . $slider_showmax
                . "\t</div></div>"
                . "</div>$sliderright\n"
                . "<input class=\"text\" type=\"text\" name=\"$myfname\" id=\"answer$myfname\" value=\"";

and then in Template.css I added the id Myslider and included the background image:

#MySlider{
background-image:url(sliderBG3.png);
text-align:center;
background-repeat:no-repeat;
height:51px;
width:486px;
}

and lastly I removed the default bg for the slider and changed the width like this:

.ui-slider-1 {
width: 445px;
height: 51px;
margin-bottom: 20px;
}

I also changed the handler button:

.ui-slider .ui-slider-handle {
position: absolute;
height: 70px;
width: 70px;
top: -6px;
left: 0;
margin-left: -15px;
background: transparent url(sliderknapp3.png) 0 0 no-repeat;
border-width: 0;
}

I think that was it and everything is working like a charm!

Cheers
/Adam
Last Edit: 4 years 1 month ago by adishardis. Reason: fixed spelling
The administrator has disabled public write access.
Time to create page: 0.316 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form