jQuery UI Sliders hops when clicked

Question

I'm using Jquery UI slider to create two different slide effect, one horizontal and other vertical .

But there is an unique problem with both of them which is bugging me and my client, and I don't seem to be able to find a solution. This is a headache and a bummer after all the work I have been but into these modules.

I'm sure that I'm not the only one having this problem, but don't seem to find any solutions which fit my problem online

You can see both modules here

http://bit.ly/dVLPfc

http://bit.ly/g5rflP

The slider it self uses percentage for its position "left:0%", if you click on slider it hops about 5-7%. So it seems a bit unstable. What I want is for the slider to use the amount of percentage it is set on when I click it and than change only if I move the mouse. I have tried to stick the position into a value and throw it in when I click on the slider, but the UI slider plugin over-writes it.

The slider does not always follow the cursors speed, in the vertical version you can see it moves out of the cursors spot under some circumstances.

Let me know what you think, hopefully you can help me get on the right track.

Answer 1

Your slider handle margins appear to be wrong for the size of your custom-styled slider handles.

Your left or top margins need to be half the length or height of the scroll handle.

For your first module, because the length of your horizontal slider handle is 60px, you need to change the slider handle margin-left to -30px in dagskra.css.

#dagskra .slider div a {
    background: url("../images/dagskra/slider/slider.png") no-repeat scroll right center transparent;
    cursor: default;
    display: block;
    height: 28px;
    margin-left: -30px;
    position: absolute;
    top: -0.5em;
    width: 60px;
    z-index: 2;
}

For your second module, because the height of the vertical slider handle is 50px, you need to change the slider handle margin-top to -25px in dagatal.css.

.ui-slider-handle {
    background: url("../images/dagatal/scroll/slider.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 2px;
    margin-top: -25px;
    position: absolute;
    right: -4px;
    width: 16px;
    z-index: 20;
}