Question

In this example.. http://jsfiddle.net/PKFyV/

You can see that I’m using jquery ui to build a slider. You can drag the red bar up and down to see the value of the input change but when you do that you notice a problem with the red image keeping its gradient perspective. Jquery is setting the height of that div so when it is very small it’s using the top end of the image which is the lighter end of the gradient. What I need is for the background to start at the bottom and scale up based on the height of the div so that when the slider is set to 1 or 2, the bottom bars show the darker end of the red gradient image. Any ideas?

.ui-slider {
    position: relative;
    text-align: left;
}
#slider-vertical {
    background:url(http://qupload.com/images/ratingslid.png) no-repeat -30px 0;
    width:30px;
    height:161px;
}
.ui-slider-range {
    background:url(http://qupload.com/images/ratingslid.png) no-repeat 0 0;
    width:30px;
    height:161px;
}
.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    border: 0;
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
}

Answer 1

Try this:

.ui-slider-range {
    background:url(http://qupload.com/images/ratingslid.png) no-repeat 0 bottom;
    width:30px;
    height:161px;
}

Demo