CSS up & down buttons for jQuery UI Slider

Question

CSS, another of my obvious weaknesses, is killing me.

Poster of this post was generous enough to show me how to append a slider to a div, but I think I need up and down buttons since my scrollbar could have a ton of steps.

I won't embarrass myself or bore you with all of my iterations that came out plain wrong.

Could someone show me how to append a jQuery UI icon on top and bottom of the vertical slider to make it look like a scrollbar so that it works with the CSS provided in the post above? It's the CSS that's not working for me.

Many thanks in advance!

Edit

Great answers, thank-you very much. Is there a way to keep the slider from bleeding into the buttons? I'll try to put up the check asap.

Nevermind. Just figured out what top and bottom really do.

Final Conclusion

Both solutions work, and I was able to adjust for bleeding with top and bottom easily.

I gave the checkmark to Abody97 because of the backwards compatibility, so I guess it sounds like tomaroo will be more correct in the future. Too bad stack doesn't allow for multiple checkboxes :(

Answer 1

Here's my try: little link.

What I basically did: first, I modified the HTML a bit:

<div id="vertical-slider">
<div class = "up">/\</div>
<div class = "down">\/</div>
</div>

Added this to CSS:

#vertical-slider {
    position: relative; /*necessary for the buttons' positioning to work*/
}
.up {
    position: absolute;
    top: 0; /*up there*/
    left: 0; /*on the left*/
}
.down {
    position: absolute;
    bottom: 0; /*down there*/
    left: 0; /*on the left*/
}
.up, .down {
    width: 100%; /*take up all the width inside the slider*/
    background: rgb(0, 162, 232); /*prettiness*/
    color: white; /*prettiness, too*/
    z-index: 1000; /*make sure they're not covered*/
}

Note that you'll have to handle clicks yourself, but this should give you an idea on how to achieve the visual layout.

Answer 2

You can use the CSS :before and :after pseudoselectors:

Example

You'll want to play with the top and z-index properties to get the desired look.

#vertical-slider:before{
    content: url('/slidertop.png');
    position: absolute;
    top: -8px;
    z-index: 1;
}
#vertical-slider:after{
    content: url('/sliderbottom.png');
    position: absolute;
    top: 192px;
    z-index: 1;
}