use slider for histogram parameters

frontend/src/views/Stats.vue

@@ -34,21 +34,34 @@
                 <v-icon class="white--text">far fa-chart-bar</v-icon>
                 <v-toolbar-title>Gene length distribution</v-toolbar-title>
                 <v-spacer></v-spacer>
-                <v-flex xs2 md1>
-                  <v-select
-                    :items="this.windowSizeChoice"
-                    color="primary lighten-3"
+                <v-flex xs4 md2 class="mt-3">
+                  <v-slider
                     v-model="geneLengthWindowSize"
                     @change="getAllGeneLength"
-                  ></v-select>
+                    thumb-label
+                    color="secondary lighten-2"
+                    thumb-color="secondary lighten-1"
+                    step="100"
+                    min="100"
+                    max=200
+                    always-dirty
+                    label="Window size (bp):"
+                  ></v-slider>
                 </v-flex>
-                <v-flex xs2 md1>
-                  <v-select
-                    :items="this.stopAtChoice"
-                    color="primary lighten-3"
+                <v-flex xs4 md2 xl1 class="mt-3 ml-4">
+                  <v-slider
                     v-model="stopAt"
                     @change="getAllGeneLength"
-                  ></v-select>
+                    thumb-label
+                    color="secondary lighten-2"
+                    thumb-color="secondary lighten-1"
+                    step="1000"
+                    min="1000"
+                    max=5000
+                    ticks
+                    always-dirty
+                    label="Stop at (bp):"
+                  ></v-slider>
                 </v-flex>
               </v-toolbar>
               <histogram :histoData="geneLengthData" chartId="histo_gene_length"></histogram>
@@ -116,20 +129,6 @@ export default {
     };
   },
   computed: {
-    stopAtChoice() {
-      let listStopAt = [];
-      for (let i=1000; i<=5000; i+=1000) {
-        listStopAt.push(i);
-      };
-      return listStopAt;
-    },
-    windowSizeChoice() {
-      let windowSize = [];
-      for (let i=100; i<=200; i+=100) {
-        windowSize.push(i);
-      };
-      return windowSize;
-    },
     selectLevel() {
       return ['kingdom', 'superkingdom', 'phylum', 'class', 'order', 'family', 'genus'];
     },