/***************************************************************

                <div id="content-slider"><div class="content-slider-handle"></div></div>

                  jQuery("#content-slider").slider({
                    orientation: "vertical",
                    animate: true,
                    min: 0,
                    max: 100,
                    value: 86,
                    handle: ".content-slider-handle",
                    change: handleSliderChange,
                    slide: handleSliderSlide
                  });

***************************************************************/


                function handleSliderChange(e, ui)
                {
                          var maxScroll = jQuery("#content-scroll").attr("scrollHeight") - jQuery("#content-scroll").height();
                          jQuery("#content-scroll").attr({scrollTop: ((ui.value - 100) * (-1)) * (maxScroll/ 100) });
                          if(jQuery('#content-slider').slider('option', 'value') > 86) { jQuery('#content-slider').slider('option', 'value', 86);}
                          if(jQuery('#content-slider').slider('option', 'value') < 7) { jQuery("#content-slider").slider('option', 'value', 7);}
                }
        
                function handleSliderSlide(e, ui)
                {
                        var maxScroll = jQuery("#content-scroll").attr("scrollHeight") - jQuery("#content-scroll").height();
                        jQuery("#content-scroll").attr({scrollTop: ((ui.value - 100) * (-1)) * (maxScroll / 100) });
                }