Getting the sliderhandle to stay within the "sliderlane"

More
4 years 9 months ago #87782 by adishardis
adishardis created the topic: Getting the sliderhandle to stay within the "sliderlane"
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

Please Log in to join the conversation.

More
4 years 9 months ago #87837 by DenisChenu
DenisChenu replied the topic: Getting the sliderhandle to stay within the "sliderlane"
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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 9 months ago - 4 years 9 months ago #87852 by adishardis
adishardis replied the topic: Getting the sliderhandle to stay within the "sliderlane"
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 9 months ago by adishardis. Reason: fixed spelling

Please Log in to join the conversation.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now