diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less
index b03cd9bd..00a4e0a4 100644
--- a/src/_h5ai/client/css/inc/general.less
+++ b/src/_h5ai/client/css/inc/general.less
@@ -21,6 +21,9 @@
 @col-sb-thumb: rgba(0,0,0,0.15);
 @col-sb-thumb-active: rgba(0,0,0,0.25);
 
+@col-range-back: rgb(224,224,224);
+@col-range-thumb: rgb(190,190,190);
+
 @border-widget: 1px solid @col-border;
 @border-widget-sep: 1px solid @col-widget-sep;
 
diff --git a/src/_h5ai/client/css/inc/sidebar.less b/src/_h5ai/client/css/inc/sidebar.less
index b49c0d42..87fa054b 100644
--- a/src/_h5ai/client/css/inc/sidebar.less
+++ b/src/_h5ai/client/css/inc/sidebar.less
@@ -94,40 +94,39 @@
 		width: 224px;
 	}
 
-	input[type='range'] {
+	.range-track() {
+		-moz-appearance: none;
+		-ms-appearance: none;
 		-webkit-appearance: none;
 		border-width: 0;
 		border-radius: 2px;
-		background-color: #eee;
+		background-color: @col-range-back;
 		height: 12px;
 		vertical-align: middle;
 		width: 64px;
 		margin: 0 0 4px 12px;
+		padding: 0;
 	}
-	input[type='range']::-webkit-slider-thumb {
+
+	.range-thumb() {
+		-moz-appearance: none;
+		-ms-appearance: none;
 		-webkit-appearance: none;
-		border: 1px solid #aaa;
+		border: 1px solid @col-range-thumb;
 		border-radius: 2px;
-		background-color: #aaa;
-		height: 12px;
-		width: 12px;
-		vertical-align: middle;
-	}
-	input[type='range']::-moz-range-track {
-		-moz-appearance: none;
-		border-width: 0;
-		border-radius: 2px;
-		background-color: #eee;
-		height: 6px;
-		vertical-align: middle;
-	}
-	input[type='range']::-moz-range-thumb {
-		-moz-appearance: none;
-		border: 1px solid #aaa;
-		border-radius: 2px;
-		background-color: #aaa;
+		background-color: @col-range-thumb;
 		height: 12px;
 		width: 12px;
 		vertical-align: middle;
 	}
+
+	input[type='range'] { .range-track; }
+	input[type='range']::-moz-range-track { .range-track; }
+	input[type='range']::-ms-track { .range-track; }
+	input[type='range']::-ms-fill-lower { .range-track; }
+	input[type='range']::-ms-fill-upper { .range-track; }
+
+	input[type='range']::-webkit-slider-thumb { .range-thumb; }
+	input[type='range']::-moz-range-thumb { .range-thumb; }
+	input[type='range']::-ms-thumb { .range-thumb; }
 }
diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js
index ad2fb242..d12156be 100644
--- a/src/_h5ai/client/js/inc/view/viewmode.js
+++ b/src/_h5ai/client/js/inc/view/viewmode.js
@@ -110,7 +110,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 				max = settings.sizes.length-1;
 				$(sizeTemplate)
 					.prop('max', max).attr('max', max)
-					.on('input', function (event) {
+					.on('input change', function (event) {
 
 						update(null, settings.sizes[parseInt(event.target.value, 10)]);
 					})