diff --git a/control.php b/control.php
index 45e8b5b..53eb667 100644
--- a/control.php
+++ b/control.php
@@ -33,6 +33,11 @@
 			$repeat = ($mympd->repeat == 0 ? 1 : 0);
 			$mympd->SetRepeat($repeat);
 			break;
+		case 'volume':
+			$volume = $_GET['value'];
+			$mympd->SetVolume($volume);
+			die();
+			break;
 	}
 
 	echo mpd_info();
diff --git a/lib/js/neompc.js b/lib/js/neompc.js
index 9ae0549..f55cbc7 100644
--- a/lib/js/neompc.js
+++ b/lib/js/neompc.js
@@ -3,6 +3,7 @@ template = '{:$template:}';
 volume_min = {:$volume_min:};
 volume_max = {:$volume_max:};
 vol_orientation = '{:$volume_orientation:}'
+vol_offset = 0;
 
 String.prototype.pad = function(l, s){
 	return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this;
@@ -14,41 +15,46 @@ function seconds_to_time(seconds) {
 }
 
 function volume_to_pos(volume) {
-	pos = volume_min + (volume / 100) * (volume_max - volume_min);
+	pos = Math.round(volume_min + ((volume / 100) * (volume_max - volume_min)));
 	return pos;
 }
 
 function pos_to_volume(pos) {
-	
+	volume = Math.round(((pos - volume_min) / (volume_max - volume_min)) * 100);
+	return volume;
 }
 
-function ajax_control(action) {
+function ajax_control(action, value) {
 	// this function will fire an AJAX call with the appropriate action.
 	// or it will simply fire an AJAX call to get the current status.
 
-	$.getJSON('control.php', {action: action},
+	$.getJSON('control.php', {action: action, value: value},
 		function(data){
 			// this is where we update the page.
-			if (data.state == 'play') {
-				$('#playpause_button').addClass('pause');
+			if (data != null) {
+				if (data.state == 'play') {
+					$('#playpause_button').addClass('pause');
+				}
+				else {
+					$('#playpause_button').removeClass('pause');
+				}
+				$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
+				$('#artist').text(data.artist || '');
+				$('#album').text(data.album || '');
+				$('#title').text(data.title || '');
+				$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
+				$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
+				if (data.repeat == 1) {
+					$('#repeat_button').addClass('selected');
+				}
+				else {
+					$('#repeat_button').removeClass('selected');
+				}
+				if ($('#volume_slider').attr('rel') != '1') {
+					$('#volume_slider').css((vol_orientation == 'h' ? 'left' : 'top'), volume_to_pos(data.volume)+'px');
+				}
+				update_progress(data.position, data.length);
 			}
-			else {
-				$('#playpause_button').removeClass('pause');
-			}
-			$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
-			$('#artist').text(data.artist || '');
-			$('#album').text(data.album || '');
-			$('#title').text(data.title || '');
-			$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
-			$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
-			if (data.repeat == 1) {
-				$('#repeat_button').addClass('selected');
-			}
-			else {
-				$('#repeat_button').removeClass('selected');
-			}
-			$('#volume_slider').css('top', volume_to_pos(data.volume)+'px');
-			update_progress(data.position, data.length);
 	});
 }
 
@@ -85,8 +91,6 @@ function show_volume() {
 
 $(document).ready(function(){
 	
-	update_int = null;
-	
 	$('.control_button').click(function(event){
 		ajax_control(this.rel);
 		this.blur();
@@ -98,11 +102,25 @@ $(document).ready(function(){
 		return false;
 	});
 	
-	$('#volume_container').click(function(event){
+	$('#volume_hide').click(function(event){
 		hide_volume();
 		return false;
 	});
 	
+	$('#volume_slider').draggable({
+							axis: 'y',
+							containment: 'parent',
+							opacity: 0.5,
+							start: function() {
+								this.rel = '1';
+							},
+							stop: function() {
+								pos = parseInt($('#volume_slider').css('top'));
+								ajax_control('volume', pos_to_volume(pos));
+								this.rel = '';
+							}
+						});
+
 	ajax_control();
 	ajax_int = setInterval('ajax_control()', 1000);
 	
diff --git a/smarty/templates_c/%%FD^FD6^FD689738%%neompc.js.php b/smarty/templates_c/%%FD^FD6^FD689738%%neompc.js.php
index c0dd757..e4d7540 100644
--- a/smarty/templates_c/%%FD^FD6^FD689738%%neompc.js.php
+++ b/smarty/templates_c/%%FD^FD6^FD689738%%neompc.js.php
@@ -1,4 +1,4 @@
-<?php /* Smarty version 2.6.26, created on 2010-01-12 20:03:58
+<?php /* Smarty version 2.6.26, created on 2010-01-13 17:13:45
          compiled from ../lib/js/neompc.js */ ?>
 progressbar_width = <?php echo $this->_tpl_vars['progressbar_width']; ?>
 ;
@@ -10,6 +10,7 @@ volume_max = <?php echo $this->_tpl_vars['volume_max']; ?>
 ;
 vol_orientation = '<?php echo $this->_tpl_vars['volume_orientation']; ?>
 '
+vol_offset = 0;
 
 String.prototype.pad = function(l, s){
 	return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this;
@@ -21,41 +22,46 @@ function seconds_to_time(seconds) {
 }
 
 function volume_to_pos(volume) {
-	pos = volume_min + (volume / 100) * (volume_max - volume_min);
+	pos = Math.round(volume_min + ((volume / 100) * (volume_max - volume_min)));
 	return pos;
 }
 
 function pos_to_volume(pos) {
-	
+	volume = Math.round(((pos - volume_min) / (volume_max - volume_min)) * 100);
+	return volume;
 }
 
-function ajax_control(action) {
+function ajax_control(action, value) {
 	// this function will fire an AJAX call with the appropriate action.
 	// or it will simply fire an AJAX call to get the current status.
 
-	$.getJSON('control.php', {action: action},
+	$.getJSON('control.php', {action: action, value: value},
 		function(data){
 			// this is where we update the page.
-			if (data.state == 'play') {
-				$('#playpause_button').addClass('pause');
+			if (data != null) {
+				if (data.state == 'play') {
+					$('#playpause_button').addClass('pause');
+				}
+				else {
+					$('#playpause_button').removeClass('pause');
+				}
+				$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
+				$('#artist').text(data.artist || '');
+				$('#album').text(data.album || '');
+				$('#title').text(data.title || '');
+				$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
+				$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
+				if (data.repeat == 1) {
+					$('#repeat_button').addClass('selected');
+				}
+				else {
+					$('#repeat_button').removeClass('selected');
+				}
+				if ($('#volume_slider').attr('rel') != '1') {
+					$('#volume_slider').css((vol_orientation == 'h' ? 'left' : 'top'), volume_to_pos(data.volume)+'px');
+				}
+				update_progress(data.position, data.length);
 			}
-			else {
-				$('#playpause_button').removeClass('pause');
-			}
-			$('#pos').text((data.track_no > -1 ? data.track_no+'.' : ''));
-			$('#artist').text(data.artist || '');
-			$('#album').text(data.album || '');
-			$('#title').text(data.title || '');
-			$('#cover').attr('src', (data.coverimage ? data.coverimage : 'templates/'+template+'/images/default_cover.png'));
-			$('#current').text((data.position > -1 ? seconds_to_time(data.position) : '--:--'));
-			if (data.repeat == 1) {
-				$('#repeat_button').addClass('selected');
-			}
-			else {
-				$('#repeat_button').removeClass('selected');
-			}
-			$('#volume_slider').css('top', volume_to_pos(data.volume)+'px');
-			update_progress(data.position, data.length);
 	});
 }
 
@@ -92,8 +98,6 @@ function show_volume() {
 
 $(document).ready(function(){
 	
-	update_int = null;
-	
 	$('.control_button').click(function(event){
 		ajax_control(this.rel);
 		this.blur();
@@ -105,11 +109,25 @@ $(document).ready(function(){
 		return false;
 	});
 	
-	$('#volume_container').click(function(event){
+	$('#volume_hide').click(function(event){
 		hide_volume();
 		return false;
 	});
 	
+	$('#volume_slider').draggable({
+							axis: 'y',
+							containment: 'parent',
+							opacity: 0.5,
+							start: function() {
+								this.rel = '1';
+							},
+							stop: function() {
+								pos = parseInt($('#volume_slider').css('top'));
+								ajax_control('volume', pos_to_volume(pos));
+								this.rel = '';
+							}
+						});
+
 	ajax_control();
 	ajax_int = setInterval('ajax_control()', 1000);
 	
diff --git a/templates/default/config.inc.php b/templates/default/config.inc.php
index 4eda4e7..4bb8138 100644
--- a/templates/default/config.inc.php
+++ b/templates/default/config.inc.php
@@ -7,7 +7,7 @@
 	$_CONFIG['progress_bar_width'] = 276;
 	
 	$_CONFIG['volume_orientation'] = 'v';
-	$_CONFIG['volume_max'] = 5;
-	$_CONFIG['volume_min'] = 105;
+	$_CONFIG['volume_max'] = 0;
+	$_CONFIG['volume_min'] = 100;
 
 ?>
diff --git a/templates/default/control.html b/templates/default/control.html
index 3e575b6..5734e42 100644
--- a/templates/default/control.html
+++ b/templates/default/control.html
@@ -17,7 +17,7 @@
 			
 			<div id="album_info"><p id="artist"></p><p id="album"></p></div>
 	
-			<div id="tracktime"><span id="current">--:--</span></div>
+			<div id="tracktime"><span id="current">--:--</span><span id="volume_display"></span></div>
 	
 			<div id="progress"><div id="progressbar" style="margin-right: 100%;">&nbsp;</div></div>
 	
@@ -37,8 +37,10 @@
 				</ul>
 				<div id="volume_repeat">
 					<div id="volume_container">
-						<a id="volume_slider"></a>
-						<a id="volume_hide" href="index.php?action=hide_volume"></a>
+						<div id="slider_container">
+							<a id="volume_slider"></a>
+							<a id="volume_hide" href="index.php?action=hide_volume"></a>
+						</div>
 					</div>
 					<a rel="volume" id="volume_button" href="index.php?action=show_volume"></a>
 					<a rel="repeat" id="repeat_button" class="control_button" href="index.php?action=repeat"></a>
diff --git a/templates/default/index.html b/templates/default/index.html
index 84ffa1a..950f040 100644
--- a/templates/default/index.html
+++ b/templates/default/index.html
@@ -11,6 +11,7 @@
 		</style>
 		
 		<script type="text/javascript" src="lib/js/jquery-min.js"></script>
+		<script type="text/javascript" src="lib/js/jquery-ui-custom-min.js"></script>
 		<script type="text/javascript">
 			{:include file="../lib/js/neompc.js":}
 		</script>
diff --git a/templates/default/styles.css b/templates/default/styles.css
index d4544a8..5202bf5 100644
--- a/templates/default/styles.css
+++ b/templates/default/styles.css
@@ -231,6 +231,12 @@ img.button {
 	height: 160px;
 	width: 30px;
 }
+#volume_container #slider_container {
+	position: absolute;
+	top: 5px;
+	height: 130px;
+	width: 28px;
+}
 #volume_container a#volume_hide {
 	position: absolute;
 	top: 140px;
@@ -238,7 +244,7 @@ img.button {
 	width: 30px;
 	height: 20px;
 }
-#volume_container a#volume_slider {
+#volume_container #volume_slider {
 	background: url(templates/{:$template:}/images/volume_slider.png) center center no-repeat;
 	position: absolute;
 	top: 5px;