jQuery UI Current

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div id="slider" style="background:white;"></div>

CSS

body { background-color: green; }

.ui-slider {
    height: 338px;
    background: url('http://www.zpnd.com/sak/images/bg_scroller.png') center center no-repeat;
    border:0;
}

.ui-slider .ui-slider-handle {
    width: 19px; 
    height: 31px;
    background: url('http://www.zpnd.com/sak/images/scroller.png') center center no-repeat;
    border: 0;
    left: -.2em;
}

JavaScript

var minVal = 0; var maxVal = 100;
$('#slider').slider({
	range: true,
	min: minVal,
	max: maxVal,
	values: [ minVal, maxVal ],
	slide: function( event, ui ) {
		console.log("lower: " + ui.values[ 0 ] + " - higher: " + ui.values[ 1 ]);
	}
});