Binary Mind Binary Mind - 2 months ago 13
CSS Question

jQuery Slider handles shifted to left

I have need to use a slider from jQuery and must resize it. Everything looks good, except the handles, shifted to left. I tried css

margin
,
padding
,
right
but it didn't help. Is there some way to correct this?

Bellow you can find what is it like (zoomed 500%) and css code.
enter image description here

.ui-slider {
background: #1f3e7c;
border-radius: 5px 5px 5px 5px;
}
.ui-slider-range {
background: #3366cc;
border-radius: 5px 5px 5px 5px;
}
.ui-slider .ui-slider-handle {
background: #dc3912;
border-radius: 2px 2px 2px 2px;
width: 3px;
height: 11px;
}
/* for div that contains slider*/
.rangeSlider {
color:#0000ff;
position: absolute;
width: 30%;
top: 100%;
height: 4px;
}


UPDATE: Please, see below link for details:
https://jsfiddle.net/binary_mind/xnL9b9uq/5/

Answer

In jquery-ui.css:753

There is margin-left: -.6em; property for .ui-slider-horizontal .ui-slider-handle. Change it to 0 and it will be done!