Index: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 33058)
+++ main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 33061)
@@ -2,4 +2,12 @@
 
 function MapEditor(id) {
+	// TODO: investigate const, see https://www.w3schools.com/js/js_const.asp and check it will work on older browsers,
+	// https://stackoverflow.com/questions/4271566/how-do-i-know-which-version-of-javascript-im-using
+	this.MAX_THICKNESS = 5.0; 
+	this.MIN_THICKNESS = 0.0;
+	
+	this.MAX_OPACITY = 100.00; 
+	this.MIN_OPACITY = 0.00;
+	
 	this.id = id;
 	this.shiftKeyPressed = false;
@@ -10,5 +18,5 @@
 	this.colorButtons = {};
 	this.thicknessValue = 1;
-	this.opacityValue = 0.4;
+	this.opacityValue = 40;
 	this.overlays = [];
 	this.selectedShapes = [];
@@ -29,5 +37,5 @@
 		fillColor: '#CA4A2F',
 		strokeWeight: this.thicknessValue,
-		fillOpacity: this.opacityValue,
+		fillOpacity: this.opacityValue / 100,
 		editable: true,
 		geodesic: false,
@@ -61,5 +69,5 @@
 	var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
 	var thicknessValue = ((thicknessSlider.value / 20) * 100) / 100;
-	thicknessSliderOutput.innerHTML = thicknessValue.toFixed(2);
+	thicknessSliderOutput.value = thicknessValue.toFixed(2);
 	//console.log("Init thickness slider value: " + thicknessValue);
 
@@ -67,23 +75,43 @@
 		that.shapeSpecsChangeMD();
 		var thicknessVal = ((this.value / 20) * 100) / 100;
-		thicknessSliderOutput.innerHTML = thicknessVal.toFixed(2);
+		thicknessSliderOutput.value = thicknessVal.toFixed(2);
 		that.thicknessValue = this.value / 20;
 		that.shapeOptions.strokeWeight = that.thicknessValue;
 		that.setSelectedThickness(that.thicknessValue);
-
+	}
+		
+	thicknessSliderOutput.oninput = function () {
+		that.shapeSpecsChangeMD();
+		if(this.value > that.MAX_THICKNESS) this.value = that.MAX_THICKNESS;
+		if(this.value < that.MIN_THICKNESS) this.value = that.MIN_THICKNESS;
+		var thicknessVal = this.value * 20;
+		thicknessSlider.value = thicknessVal.toFixed(2);
+		that.thicknessValue = this.value;
+		that.shapeOptions.strokeWeight = that.thicknessValue;
+		that.setSelectedThickness(that.thicknessValue);
 	}
 	//Update opacity
+	// TODO: https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
 	var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
 	var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-	opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%";
+	//opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%";
 	
 	opacitySlider.oninput = function () {
 		that.shapeSpecsChangeMD();
-		opacitySliderOutput.innerHTML = Math.round(this.value * 100) / 100 + "%";
+		opacitySliderOutput.value = this.value;
 		that.opacityValue = this.value / 100;
 		that.shapeOptions.fillOpacity = that.opacityValue;
 		that.setSelectedOpacity(that.opacityValue);
 	}
-
+	opacitySliderOutput.oninput = function () {
+		that.shapeSpecsChangeMD();
+		if(this.value > that.MAX_OPACITY) this.value = that.MAX_OPACITY;
+		if(this.value < that.MIN_OPACITY) this.value = that.MIN_OPACITY;
+		opacitySlider.value = this.value;
+		that.opacityValue = this.value / 100;
+		that.shapeOptions.fillOpacity = that.opacityValue;
+		that.setSelectedOpacity(that.opacityValue);
+	}
+	
 	document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() });
 	document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
@@ -336,69 +364,79 @@
 	//Keyboard shortcuts			
 	var mapAndControls = document.getElementById("map-and-controls-" + this.id);
-	
-	//Sets shift as unpressed
-	mapAndControls.addEventListener('keyup', function (event) { 	
-		if (event.keyCode == '16') {
-			that.shiftKeyPressed = false;
-		}
-	});
-	
-	mapAndControls.addEventListener('keydown', function (event) { 
-
-		// https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler	
-		var keyCode = String.fromCharCode(event.which);
-//		console.log("Key pressed: " + keyCode);
+	var thicknessField = document.getElementById ("thicknessRangeVal-" + this.id);
+	var opacityField = document.getElementById ("opacityRangeVal-" + this.id);
+	var openMapFunction = function() {
+		//Sets shift as unpressed
+		mapAndControls.addEventListener('keyup', function (event) { 	
+			if (event.keyCode == '16') {
+				that.shiftKeyPressed = false;
+			}
+		});
 		
-		//Sets shift as pressed
-		if (event.keyCode == '16') {
-			that.shiftKeyPressed = true;
-		}
-		else if (keyCode == 'Y' && (event.ctrlKey || event.metaKey)) {
-			that.mapEditorHistory.redo();
-		}
-		else if (keyCode == 'Z' && (event.ctrlKey || event.metaKey) ) {
-			if (that.shiftKeyPressed == false) {
-			that.mapEditorHistory.undo();
-			}	
-		}
-		else if (keyCode == 'A' && (event.ctrlKey || event.metaKey)) {
-			event.preventDefault();
-			that.drawingManager.setDrawingMode(null);
-			that.selectAll();		
-		}
-		else if (keyCode == 'D' && (event.ctrlKey || event.metaKey)) {
-			event.preventDefault();
-			that.deselectAll();
-		}
-		else if (keyCode == '0' || keyCode == 'Ã' || (keyCode == 'G'&& (event.ctrlKey || event.metaKey))) {
-			event.preventDefault();	
-			that.drawingManager.setDrawingMode(null);
-		} else if (keyCode == '1') {
-			that.drawingManager.setDrawingMode('marker');
-		} else if (keyCode == '2') {
-			that.drawingManager.setDrawingMode('circle');
-		} else if (keyCode == '3') {
-			that.drawingManager.setDrawingMode('polygon');
-		} else if (keyCode == '4') {
-			that.drawingManager.setDrawingMode('polyline');
-		} else if (keyCode == '5') {
-			that.drawingManager.setDrawingMode('rectangle');
-		} 
-		//else if (keyCode == 'S') {
-		//	that.saveToArchives();	
-		//} 
-		else if (keyCode == 'Q') { // for debugging information, press Q (easy to hit key)
-			that.printHistory();
-		}
-		else if (keyCode == '.') {
-			that.deleteSelectedShapes();
-		}
-//									console.log(keyCode);
-	});
-
+		mapAndControls.addEventListener('keydown', function (event) { 
+
+			// https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler	
+			var keyCode = String.fromCharCode(event.which);
+			//console.log("Key pressed: " + keyCode);
+	
+			//disable keyboard shortcut within the number input field
+			var activeElement = $(document.activeElement);
+			if(activeElement.attr('type') == 'number'){
+				//console.log('number detected')
+				return;
+			}
+			//Sets shift as pressed
+			if (event.keyCode == '16') {
+				that.shiftKeyPressed = true;
+			}
+			else if (keyCode == 'Y' && (event.ctrlKey || event.metaKey)) {
+				that.mapEditorHistory.redo();
+			}
+			else if (keyCode == 'Z' && (event.ctrlKey || event.metaKey) ) {
+				if (that.shiftKeyPressed == false) {
+				that.mapEditorHistory.undo();
+				}	
+			}
+			else if (keyCode == 'A' && (event.ctrlKey || event.metaKey)) {
+				event.preventDefault();
+				that.drawingManager.setDrawingMode(null);
+				that.selectAll();		
+			}
+			else if (keyCode == 'D' && (event.ctrlKey || event.metaKey)) {
+				event.preventDefault();
+				that.deselectAll();
+			}
+			
+			else if (keyCode == '0' || keyCode == 'Ã' || (keyCode == 'G'&& (event.ctrlKey || event.metaKey))) {
+				event.preventDefault();	
+				that.drawingManager.setDrawingMode(null);
+			} else if (keyCode == '1') {
+				that.drawingManager.setDrawingMode('marker');
+			} else if (keyCode == '2') {
+				that.drawingManager.setDrawingMode('circle');
+			} else if (keyCode == '3') {
+				that.drawingManager.setDrawingMode('polygon');
+			} else if (keyCode == '4') {
+				that.drawingManager.setDrawingMode('polyline');
+			} else if (keyCode == '5') {
+				that.drawingManager.setDrawingMode('rectangle');
+			} 
+			
+			//else if (keyCode == 'S') {
+			//	that.saveToArchives();	
+			//} 
+			else if (keyCode == 'Q') { // for debugging information, press Q (easy to hit key)
+				that.printHistory();
+			}
+			else if (keyCode == '.') {
+				that.deleteSelectedShapes();
+			}
+	//									console.log(keyCode);
+		});
+	};
+	
+	openMapFunction();
 
 	this.buildColorPalette();
-	
-	
 	
 	
@@ -629,11 +667,13 @@
 	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
 	// update the thickness innerHTML's value to always have 2 decimal places, https://www.w3schools.com/js/js_number_methods.asp
-	thicknessSliderOutput.innerHTML = thi.toFixed(2); 
+	//console.log("thi =" + thi + " type of = " + typeof thi );
+	thi = parseFloat(thi); //Ensure the thi is a number
+	thicknessSliderOutput.value = thi.toFixed(2); 
 	document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;
 
 	//Update the opacity slider and value on the settings menu
 	var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-	opacitySliderOutput.innerHTML = Math.round(opa * 100) * 100 / 100 + "%";
-	document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
+	opacitySliderOutput.value = opa * 100;
+	document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100;
 
 	if (this.drawingManager.drawingMode == null) {
Index: main/trunk/greenstone3/web/interfaces/default/style/map-editors.css
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/style/map-editors.css	(revision 33058)
+++ main/trunk/greenstone3/web/interfaces/default/style/map-editors.css	(revision 33061)
@@ -38,4 +38,11 @@
 
 }
+/*hide the input number spinner in Chrome 
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
+  margin: 0; 
+} 
+*/
 
 #LineThickness{
@@ -47,10 +54,48 @@
 }
 
+input[type=range]{
+	height: 10px;
+}
+
+/*make '%' display within the input field*/
+.valueChanger {
+	height: 21px;
+	width: 70px;
+	position: relative;
+	display: inline-block;
+  }
+  
+#opacityRangeVal {
+	width: 70%;
+	height: 100%;
+	padding-right: 10%;
+  }
+  
+.unit {
+	display: block;
+	width: 45px;
+	height: 21px;
+	line-height: 21px;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+  }
+
+.valueInput{
+	width:55px;
+}
+
 #ColourOpacity{
-	display: inline-block;
 	float: left;
-		margin-left: 3px;
+	margin-left: 3px;
 	margin-right: 3px;
 }
+
+/*
+#opacityRangeVal{
+   width:250px; 
+   max-width:250px;
+}
+*/
 
 #buttons3{
Index: main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl	(revision 33058)
+++ main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl	(revision 33061)
@@ -247,8 +247,15 @@
 						<div id="SecondRow">
 							<div id="LineThickness">
-								<p>Line thickness:
-									<span id="thicknessRangeVal-{@nodeID}">1.00</span>
-									<!--<input id="thicknessRangeVal-{@nodeID}" type="number" min="1.00" max="5.00" value="1.00" />-->
-									<input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" />
+								<p style="display:inline-block">Line thickness:
+									<!-- <span id="thicknessRangeVal-{@nodeID}">1.00</span> -->
+									<div class="valueChanger">
+										<input type="number" class="valueInput" id="thicknessRangeVal-{@nodeID}" min="1.00" max="5.00" value="1.00" step="0.01" />
+										<span class="unit" style="display:none">%</span>
+										<!-- % sign added above, to keep the thickness field width equal to that of the opacity field -->
+										<!-- setting the step attribute to 0.01 means we allow 2 decimal places
+											(then Firefox won't make the box red/invalid for values with 2 dec places)
+										-->
+									</div>
+									<input type="range"  size="2" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" />				
 								</p>
 								<!-- <p>Value: </p> -->
@@ -256,7 +263,11 @@
 							
 							<div id="ColourOpacity">
-								<p>Colour opacity: 
-									<span id="opacityRangeVal-{@nodeID}">1.0</span>
-									<input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" />
+								<p style="display:inline-block">Colour opacity: 
+									<!-- <span id="opacityRangeVal-{@nodeID}">1.0</span> -->
+									<div class="valueChanger">
+										<input type="number" class="valueInput" id="opacityRangeVal-{@nodeID}" min="0.0" max="100.0" value="40" />
+										<span class="unit">%</span>
+									</div>
+									<input type="range" min="0" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" />
 								</p>
 								<!-- <p>Value: </p> -->
