Home/ Questions/Q 8787441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:53:36+00:00

Well this is a very strange issue, for whatever reason slider handle is outside

  • 0

Well this is a very strange issue, for whatever reason slider handle is outside it’s parent element by half it’s height or width, why did they made it that way?…

Anyways, you can see in this fiddle: http://jsfiddle.net/PGLkW/2/ that handle goes way outside it’s container, and if i would try to remove margin like so:

.ui-slider .ui-slider-handle{
    width:100%; 
    margin-left:0px;
    left:0px;
    margin-bottom:0px;
}

​Things get’s even worse, and from what i can see i would actually need to edit widget itself for such a stupid thing, or am i not seeing something?

So just to clarify my question, i want handle to stay within it’s container, and when i click on any place to start dragging as you can see mouse doesn’t go exactly to the middle of handle, so it looks really bad.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks it doesn’t read the css properly, or because there are a lot of solutions they left it for the developers to play with it, and you have to do it until you get the result you want, here there is a solution using margin-bottom in negative:

    //CSS
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0; }
.ui-slider .ui-slider-handle{
    width: 58px;
    height: 50px;
    margin-bottom: -25px;
}

//HTML
<div class="slider" style="margin:50px; height:400px; width:50px;"></div>​

    The fiddle http://jsfiddle.net/RFVZ2/ . I hope this works for you.

    • 0