function setSlider($scrollpane, $scrollcontent, vertical) {
	$scrollpane.css('overflow','hidden');
	 
	//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
	var difference = (vertical)? $scrollcontent.outerHeight() - $scrollpane.height() : $scrollcontent.outerWidth() - $scrollpane.width();
	
	//scrollbar exists but is no longer required
	if (difference <= 0 && $scrollpane.next('.slider-wrap').length > 0) {
		$scrollpane.next('.slider-wrap').remove();//remove the scrollbar
		(vertical)? $scrollcontent.css({ top: 0 }) : $scrollcontent.css({ left: 0 });//and reset the top position
		return false;
	}
	//if the scrollbar is needed, set it up...
	if (difference > 0) {
		var proportion = (vertical)? difference / $scrollcontent.outerHeight() : difference / $scrollcontent.outerWidth();
		//set the proportional height - round it to make sure everything adds up correctly later on
		var handleHeight = (vertical)? Math.round((1 - proportion) * $scrollpane.height() / 2) : Math.round((1 - proportion) * $scrollpane.width() / 2);
		handleHeight -= handleHeight % 2; 

		//if the slider has already been set up and this function is called again, we may need to set the position of the slider handle
		var contentposition = $scrollcontent.position();	
		var sliderInitial = (vertical)? 100 * (1 - Math.abs(contentposition.top) / difference) : 100 - (100 * (1 - Math.abs(contentposition.left) / difference));
		
		if ($scrollpane.next('.slider-wrap').length == 0) {//if the slider-wrap doesn't exist, insert it and set the initial value
			var sliderStyle = (vertical)? 'vertical' : 'hori';
			$scrollpane.after('<\div class="slider-wrap"><\div class="slider-' + sliderStyle + '"><\/div><\/div>');//append the necessary divs so they're only there if needed
			if (vertical)
				$scrollpane.next('.slider-wrap').height($scrollpane.height());//set the height of the slider bar to that of the scroll pane
			else
				$scrollpane.next('.slider-wrap').width($scrollpane.width());
		} else if (($scrollpane.next('.slider-wrap').height() != $scrollpane.height()) && vertical) {
			$scrollpane.next('.slider-wrap').height($scrollpane.height());
		} else if (($scrollpane.next('.slider-wrap').width() != $scrollpane.width()) && !vertical) {
			$scrollpane.next('.slider-wrap').width($scrollpane.width());
		}
		
		var sliderClass = (vertical)? '.slider-vertical' : '.slider-hori';

		//set up the slider 
		$scrollpane.next().find(sliderClass).slider({
			orientation: (vertical)? 'vertical' : 'horizontal',
			min: 0,
			max: 100,
			value: sliderInitial,
			slide: function(event, ui) {
				var moveValue = -((100 - ui.value) * difference / 100);
				if (vertical)
					$scrollpane.scrollTop(Math.abs(moveValue));
				else {
					moveValue = ui.value * difference / 100;
					$scrollpane.scrollLeft(Math.abs(moveValue));
				}
				//$scrollcontent.css({ top: topValue });//move the top up (negative value) by the percentage the slider has been moved times the difference in height
			},
			change: function(event, ui) {
				var moveValue = -((100 - ui.value) * difference / 100);
				if (vertical)
					$scrollpane.scrollTop(Math.abs(moveValue));
				else {
					moveValue = ui.value * difference / 100;
					$scrollpane.scrollLeft(Math.abs(moveValue));
				}
				//$scrollcontent.css({ top: topValue });//move the top up (negative value) by the percentage the slider has been moved times the difference in height
			}	  
		});

		//set the handle height and bottom margin so the middle of the handle is in line with the slider
		if (vertical)
			$scrollpane.next().find(".ui-slider-handle").css({ 
				height: handleHeight,
				'margin-bottom': -0.5 * handleHeight
			});
		else
			$scrollpane.next().find(".ui-slider-handle").css({ 
				width: handleHeight,
				'margin-left': -0.5 * handleHeight
			});
		var origSliderHeight = (vertical)? $scrollpane.height() : $scrollpane.width();//read the original slider height
		var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
		var sliderMargin =  (origSliderHeight - sliderHeight) * 0.5;//so the slider needs to have both top and bottom margins equal to half the difference
		if (vertical) {
			$scrollpane.next().find(".ui-slider").css({
				height: sliderHeight,
				'margin-top': sliderMargin
			});//set the slider height and margins
			$scrollpane.next().find(".ui-slider-range").css({ top: -sliderMargin });
		} else {
			$scrollpane.next().find(".ui-slider").css({
				width: sliderHeight,
				'margin-left': sliderMargin
			});
			$scrollpane.next().find(".ui-slider-range").css({ left: -sliderMargin });
		}
		//position the slider-range div at the top of the slider container
	}//end if
	 
	 //code for clicks on the scrollbar outside the slider
	$(".ui-slider").unbind('click').bind('click', function(event) {//stop any clicks on the slider propagating through to the code below
   		event.stopPropagation();
   	});
   
	$(".slider-wrap").unbind('click').bind('click', function(event) {//clicks on the wrap outside the slider range
	  	var offsetTop = (vertical)? $(this).offset().top : $(this).offset().left;//read the offset of the scroll pane
	  	//find the click point, subtract the offset, and calculate percentage of the slider clicked
	  	var clickValue = (vertical)? (event.pageY - offsetTop) * 100 / $(this).height() : (event.pageY - offsetTop) * 100 / $(this).width();
	  	$(this).find(sliderClass).slider("value", 100 - clickValue);//set the new value of the slider
	}); 

	//additional code for mousewheel
	$scrollpane.parent().unbind('mousewheel').bind('mousewheel', function(event, delta) {
  		var speed = 5;
	    var sliderVal = $(this).find(sliderClass).slider("value");//read current value of the slider
	    (vertical)? sliderVal += (delta * speed) : sliderVal -= (delta * speed);//increment the current value`
	    $(this).find(sliderClass).slider("value", sliderVal);//and set the new value of the slider
	    event.preventDefault();//stop any default behaviour
 	});
}