<script setup lang="ts">
    import DoubleSlider from './components/DoubleSlider.vue';
    import NotchedSlider from './components/NotchedSlider.vue';
    import {
        ref
    } from 'vue';

    const notchedSlider = ref( NotchedSlider );

    const setUpSlider = () => {
        setTimeout( () => {
            notchedSlider.value.setUp( 5 );
        }, 500 );
    };
</script>

<template>
    <div>
        <NotchedSlider ref="notchedSlider" slider-id="test" @ready="setUpSlider()" />
        <DoubleSlider bar-color="red" handle-color="red" />
    </div>
</template>
