attach jQuery UI Slider to side of DIV (as DIV's scrollbar)

Question

Is there an easy way to attach a UI Slider to the side of a div to act as its' scrollbar? I don't care if it's technically on the side of the div or technically inside. I just need the UI Slider to look like the div's scrollbar.

It'll be a fake scrollbar because the div's content will be dynamic, so I can't go the jScrollPane route. The content is populated based upon the values in the UI Slider.

I'm stuck in CSS hell and was wondering if there's a few-line solution.

Many thanks in advance!

Answer 1

Do you mean something like this? http://jsfiddle.net/vooboo13/6TGXj/3/

HTML:

<div id="container">
<div id="box">
    <p>asdf</p>

</div>
<div id="vertical-slider"></div>

Javascript:

$(function() {
    $( "#vertical-slider" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });
    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});

CSS:

#container{
  float: left;         
  border: 1px solid #000;  
}

#box{
  float: left;
  width: 200px;
  height: 200px;    
}

#vertical-slider{
  float: right;
  height: 200px;    
}