<template>
<div style="padding:0 4%;">
    <h2>Test Slider</h2>
    <div class="grids">
        <div class="row">
            <div class="cell 80">
                <SlideBar id="sld1" v-model="val1"/>
            </div>
            <div class="cell c20">
                Normal Slider - {{val1}}
            </div>
        </div>
        <div class="row">
            <div class="cell 80">
                <SlideBar id="sld2" v-model="val2" :min="100" :max="500" :showTooltip="false"/>
            </div>
            <div class="cell c20">
                Normal Slider with Min Max value - {{val2}}
            </div>
        </div>
        <div class="row">
            <div class="cell 80">
                <SlideBar id="sld3" v-model="val2" :min="100" :max="500" :formatter="currency"/>
            </div>
            <div class="cell c20">
                Custom formatter - {{val2}}
            </div>
        </div>
        <div class="row">
            <div class="cell 80">
                <SlideBar id="sld4" v-model="val2" :min="100" :max="500" :formatter="customCurrency"/>
            </div>
            <div class="cell c20">
                Custom formatter alt - {{val2}}
            </div>
        </div>
        <div class="row">
            <div class="cell 80">
                <SlideBar id="sld5" v-model="val3" :range="range1" :showTooltip="false"/>
            </div>
            <div class="cell c20">
                Range - {{val3}}
            </div>
        </div>
    </div>
    <router-link to="/">Back to Home</router-link>
</div>
</template>

<script>

import SlideBar from '../components/forminput/SlideBar'
import { currency } from '../utils/utils'

export default {
    name: 'TestSlider',
    components: {
        SlideBar
    },
    data () {
        return {
            val1: 50,
            val2: 150,
            val3: 200,
            range1: []
        }
    },
    created () {
        this.makeRange()
    },
    methods: {
        currency,
        customCurrency (val) {
            return currency(val, 'INR')
        },
        makeRange () {
            let l = []
            for (let i = 0; i <= 500; i += 50) {
                l.push({value: i, label: `V${i}`, hidden: [200, 350, 450].includes(i)})
            }
            this.range1 = l
        }
    }
}
</script>
