💄 change select to range input

src/app/graphs/year-graph/year-graph.component.html

@@ -1,13 +1,26 @@
-<h2>Rural attractiveness of regions in {{selectedYear}}</h2>
+<h2>Rural attractiveness of regions in {{ selectedYear }}</h2>
 <div *ngIf="yearsLoaded; else loading">
-  <select
+  <div class="year-range">
+    <span>{{firstYear}}</span>
+    <input
+      type="range"
+      class="form-range"
+      [(ngModel)]="selectedYear"
+      (ngModelChange)="redrawGraphs()"
+      [min]="firstYear"
+      [max]="lastYear"
+      step="0.25"
+    />
+    <span>{{lastYear}}</span>
+  </div>
+  <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
     [(ngModel)]="selectedYear"
     (ngModelChange)="redrawGraphs()"
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
-  </select>
+  </select-->
 </div>
 <ng-template #loading> Loading data... </ng-template>
 <div id="year-graph-place"></div>

src/app/graphs/year-graph/year-graph.component.scss

@@ -0,0 +1,17 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/forms";
+
+.year-range {
+  text-align: center;
+}
+
+.year-range span {
+  font-size: 1.5rem;
+  margin: 0 0 .5em;
+}
+
+.form-range {
+  max-width: 20rem;
+}

src/app/graphs/year-graph/year-graph.component.ts

@@ -5,7 +5,8 @@ import {SdmDihService} from '../sdm-dih.service';
 
 @Component({
   selector: 'year-graph',
-  templateUrl: 'year-graph.component.html',
+  templateUrl: './year-graph.component.html',
+  styleUrls: ['./year-graph.component.scss'],
 })
 export class YearGraphComponent {
   firstYear: string;
@@ -36,7 +37,10 @@ export class YearGraphComponent {
   }
 
   drawGraph(region: string) {
-    const regionData = this.sdmDihService.sdmData[this.selectedYear].find(
+    const year = this.selectedYear.toString().includes('.')
+      ? this.selectedYear
+      : this.selectedYear + '.0';
+    const regionData = this.sdmDihService.sdmData[year].find(
       (row) => row['MODEL'] === region
     );
     const width = 100 / this.regions.length;