Vertical slider when slide to bottom background-image is compressed

Question

I used jquery-ui plugin to realize vertical slider function. I want to realize gradient effect, so I use background images, include bg/range and slide handle. The question is when I slide dot handle to bottom, bg image is compressed. Here is my example code.

jsFiddle

#head_slider .ui-slider-range {
    background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}

#head_slider_bg {
    position: absolute;
    width: 72px;
    height: 704px;
    right: 100px;
    background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}

and the same way to horizontal slider is fine! That's confusing me. Thanks for your reading and help.

Answer 1

The problem is not that the background image is compressed, but the CSS rule border-radius applied to the verticle bar becomes different. When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased.

A simple fix to this problem is add a min-height constraint to that element, which you can refer to the updated fiddle (add min-height: 60px at Line 79 of CSS).

For more detail about the behavior of browser handle border-radius, refer to Cornor Overlap section of specification.