diff --git a/src/client/main.ts b/src/client/main.ts
index a9c149a..636565e 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -234,8 +234,10 @@ async function main() {
 	}
 
 	const data = await getObj('/static/objs/racer.obj');
+	const distance: any = $('#distance').val();
+	const distanceFine: any = $('#distancefine').val();
 	const params: any = {
-		distance: $('#distance').val(),
+		distance: parseFloat(distance) + parseFloat(distanceFine),
 		circleSize: $('#circlesize').val(),
 		fov: $('#fov').val(),
 		avg: {
@@ -361,7 +363,13 @@ async function main() {
 	$(function() {
 		$('#distance').on('input', function() {
 			const distance: any = $('#distance').val();
-			params.distance = parseFloat(distance);
+			const distanceFine: any = $('#distancefine').val();
+			params.distance = parseFloat(distance) + parseFloat(distanceFine);
+		});
+		$('#distancefine').on('input', function() {
+			const distance: any = $('#distance').val();
+			const distanceFine: any = $('#distancefine').val();
+			params.distance = parseFloat(distance) + parseFloat(distanceFine);
 		});
 		$('#circlesize').on('input', function() {
 			const circleSize: any = $('#circlesize').val();
diff --git a/views/index.ejs b/views/index.ejs
index 60bb62e..23bba07 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -23,6 +23,9 @@
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change distance : </div>
+					<div style='display: inline;'>Fine: </div>
+					<input type="range" min="1" max="50" value="1" class="slider" id="distancefine">
+					<div style='display: inline;'>Coarse: </div>
 					<input type="range" min="1" max="1000" value="30" class="slider" id="distance">
 				</div>
 				<div class='ui-block'>