add range to select the gene size window

frontend/src/components/Histogram.vue

 <template>
   <div v-if="geneLengthData.counts" id="app">
-  	<h1>Gene Length Distribution</h1>
     <canvas id="histogram"></canvas>
   </div>
 </template>

frontend/src/views/Home.vue

@@ -7,7 +7,17 @@
       <h4>{{ gene.gene_id }}</h4>
       <p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
     </div>
-    <histogram v-bind:geneLengthData="geneLengthData"></histogram>
+    <div class="card">
+	  <div class="card-header">
+	    Gene length distribution
+	  </div>
+	  <div class="card-body">
+	    <histogram v-bind:geneLengthData="geneLengthData"></histogram>
+	    <label for="geneLengthWindowSize">Gene size window</label>
+		<input type="range" class="custom-range" min="1000" max="20000" step="1000" v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)" debounce="500">
+		{{geneLengthWindowSize}}
+	  </div>
+	</div>
   </div>
 </template>