<template>
    
    <div>
        <p class="font-weight-black">
            Legend
        </p>
        <v-card>
            <v-card-text>
                <p class="font-weight-medium">
                Durchschnittstemperatur Layer 1:
                </p>
                <v-range-slider
                    v-model="range0"
                    step="1"
                    :min="daterange[0]"
                    :max="daterange[1]"
                    thumb-label="always"
                    style="margin-top:3em"
                >
                </v-range-slider>
            </v-card-text>
        </v-card>
        
        <v-card style="margin-top:10px;">
            <v-card-text>
                <p class="font-weight-medium">
                    Durchschnittstemperatur Layer 1:
                </p>
                <v-checkbox
                    v-model="checkbox"
                    :label="`Checkbox 1: ${checkbox.toString()}`"
                ></v-checkbox>
                <v-range-slider
                    v-model="range1"
                    step="1"
                    :min="daterange[0]"
                    :max="daterange[1]"
                    thumb-label="always"
                    style="margin-top:3em"
                >
                </v-range-slider>
            </v-card-text>
        </v-card>
    </div>
    
</template>



<script lang="ts">

import {Vue, Ref, Component } from 'vue-property-decorator';

@Component({})
export default class Legend extends Vue{
    private checkbox: boolean = true;
    private daterange: number[] = [1900, 2020];
    private range0: number[] = [1960, 1990];
    private range1: number[] = [1991, 2020];

    mounted(){
        console.log("Legend mounted");
    }

}
</script>