Increase granularity of point-size slider

The granularity of the point slider is controlled in the jquery-ui
implementation. To give the illusion of greater granularity, increasing
the range, and dividing the value by 2 before drawing the points.

Addresses #21

demo-only.html

@@ -21,7 +21,7 @@ <h1 id='canvas-plot-titledd'>This page is for demonstration only</h1>
 			<p>
 				<img src='img/zoom-pan.png' class='icon mode-button' title='Zoom/Pan. Zoom with mouse whele.' id='zoom-button'>
 				<img src='img/lasso.png' class='icon mode-button' title='Lasso. Drag a shape to lasso points and/or select individual points by clicking' id='lasso-button'>
-				<input id='point-size-slider' type='range' min='1' max='10' value='5' class='slider mode-button' title='slider'>
+				<input id='point-size-slider' type='range' min='1' max='20' value='5' class='slider mode-button' title='slider'>
 				<img src='img/reset.png' class='icon mode-button' title='reset' id='reset-button'>
 				<br>
 			</p>
@@ -90,7 +90,7 @@ <h1 id='canvas-plot-titledd'>This page is for demonstration only</h1>
 			document.getElementById('npoints').innerHTML = 'Number of points: '+data.length.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")
 			let slider = document.getElementById('point-size-slider')
 			slider.oninput = $.debounce(1000, function() {
-				plotOptions['pointSize'] = this.value
+				plotOptions['pointSize'] = this.value * 0.5
 				canvasPlot.drawPlot(canvasPlot.data, plotGeometry, plotOptions)
 			})
 		})

index.html

@@ -20,7 +20,7 @@
 			<p>
 				<img src='img/zoom-pan.png' class='icon mode-button' title='Zoom/Pan.&#10;Zoom with mouse wheel and pan by holding down the mouse and dragging.&#10;Click "s" to toggle between Zoom/Pan and Lasso.' id='zoom-button'>
 				<img src='img/lasso.png' class='icon mode-button' title='Lasso/Select. &#10;Drag a shape to lasso points. Hold down the command key to select more than one lasso region.&#10;Click "s" to toggle between Zoom/Pan and Lasso.' id='lasso-button'>
-				<input id='point-size-slider' type='range' min='1' max='10' value='1' class='mode-button slider' title='Drag slider to change point size.'>
+				<input id='point-size-slider' type='range' min='1' max='20' value='1' class='mode-button slider' title='Drag slider to change point size.'>
 				<img src='img/reset.png' class='icon mode-button' title='Click to reset zoom/pan.' id='reset-button'>
 			</p>
 	</div>

ngchm.js

@@ -121,7 +121,7 @@ VAN.addMessageListener ('plot', function plotMessageHandler (vanodi) {
 		canvasPlot.selectedPointIds = vanodi.data.axes[0].selectedLabels ? vanodi.data.axes[0].selectedLabels : []
 		canvasPlot.drawPlot(canvasPlot.data, ScatterPlot.plotGeometry, ScatterPlot.plotOptions, ScatterPlot.colorMap);
 		slider.oninput = $.debounce(1000, function() {
-			canvasPlot.plotOptions.pointSize = this.value;
+			canvasPlot.plotOptions.pointSize = this.value * 0.5;
 			canvasPlot.drawPlot(canvasPlot.data, canvasPlot.plotGeometry, canvasPlot.plotOptions, ScatterPlot.colorMap)
 		})
 		var reset = document.getElementById('reset-button');