diff --git a/js/client-topbar.js b/js/client-topbar.js
index 79ae0f879..e157d4e8f 100644
--- a/js/client-topbar.js
+++ b/js/client-topbar.js
@@ -354,47 +354,31 @@
 		initialize: function (data) {
 			var buf = '';
 			var muted = !!Tools.prefs('mute');
-			buf += '<p class="effect-volume"><label class="optlabel">Effect volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="slider" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />') + '</p>';
-			buf += '<p class="music-volume"><label class="optlabel">Music volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="slider" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />') + '</p>';
-			buf += '<p class="notif-volume"><label class="optlabel">Notification volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="slider" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />') + '</p>';
+			buf += '<p class="effect-volume"><label class="optlabel">Effect volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />') + '</p>';
+			buf += '<p class="music-volume"><label class="optlabel">Music volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />') + '</p>';
+			buf += '<p class="notif-volume"><label class="optlabel">Notification volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />') + '</p>';
 			buf += '<p><label class="optlabel"><input type="checkbox" name="muted"' + (muted ? ' checked' : '') + ' /> Mute sounds</label></p>';
 			this.$el.html(buf).css('min-width', 160);
 		},
 		events: {
-			'change input[name=muted]': 'setMute'
+			'change input[name=muted]': 'setMute',
+			'change input[type=range]': 'updateVolume',
+			'keyup input[type=range]': 'updateVolume',
+			'input input[type=range]': 'updateVolume'
 		},
-		domInitialize: function () {
-			var self = this;
-			this.$('.effect-volume input').slider({
-				from: 0,
-				to: 100,
-				step: 1,
-				dimension: '%',
-				skin: 'round_plastic',
-				onstatechange: function (val) {
-					self.setEffectVolume(val);
-				}
-			});
-			this.$('.music-volume input').slider({
-				from: 0,
-				to: 100,
-				step: 1,
-				dimension: '%',
-				skin: 'round_plastic',
-				onstatechange: function (val) {
-					self.setMusicVolume(val);
-				}
-			});
-			this.$('.notif-volume input').slider({
-				from: 0,
-				to: 100,
-				step: 1,
-				dimension: '%',
-				skin: 'round_plastic',
-				onstatechange: function (val) {
-					self.setNotifVolume(val);
-				}
-			});
+		updateVolume: function (e) {
+			var val = Number(e.currentTarget.value);
+			switch (e.currentTarget.name) {
+			case 'effectvolume':
+				this.setEffectVolume(val);
+				break;
+			case 'musicvolume':
+				this.setMusicVolume(val);
+				break;
+			case 'notifvolume':
+				this.setNotifVolume(val);
+				break;
+			}
 		},
 		setMute: function (e) {
 			var muted = !!e.currentTarget.checked;
@@ -402,9 +386,9 @@
 			BattleSound.setMute(muted);
 
 			if (!muted) {
-				this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><input type="slider" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />');
-				this.$('.music-volume').html('<label class="optlabel">Music volume:</label><input type="slider" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />');
-				this.$('.notif-volume').html('<label class="optlabel">Notification volume:</label><input type="slider" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />');
+				this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><input type="range" min="0" max="100" step="1" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />');
+				this.$('.music-volume').html('<label class="optlabel">Music volume:</label><input type="range" min="0" max="100" step="1" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />');
+				this.$('.notif-volume').html('<label class="optlabel">Notification volume:</label><input type="range" min="0" max="100" step="1" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />');
 				this.domInitialize();
 			} else {
 				this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><em>(muted)</em>');
diff --git a/style/client.css b/style/client.css
index a80d6c845..25644f48e 100644
--- a/style/client.css
+++ b/style/client.css
@@ -3158,19 +3158,17 @@ a.ilink.yours {
 .effect-volume,
 .music-volume,
 .notif-volume {
-	height: 39px;
+	min-height: 34px;
 }
 .effect-volume label,
 .music-volume label,
 .notif-volume label {
-	padding-bottom: 12px;
 	font-size: 8pt;
 }
 .effect-volume em,
 .music-volume em,
 .notif-volume em {
 	display: block;
-	margin-top: -6px;
 	font-size: 9pt;
 	padding-left: 5px;
 	color: #555555;