source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue@ 35413

<template>
<div class="root">
    <input type="range" class="slider-continuous" v-model="sliderValue" :max="audioLength" step="0.01" />
    <span>{{ sliderValue }}</span>
</div>
</template>

<style lang="scss" scoped>
.root {
    display: flex;
    align-items: center;
    gap: 1em;
}
</style>

<script>
import Util from "../js/Util"

export default {
    name: "AudioTimeBar",
    props: {
        modelValue: Number,
        audioLength: Number
    },
    emits: [ "update:modelValue" ],
    data() {
        return {
            myValue: 0
        }
    },
    computed: {
        sliderValue: {
            get() {
                if (this.myValue < 0) {
                    return 0;
                }

                if (this.myValue > this.audioLength) {
                    return this.audioLength;
                }

                return this.myValue;
            },
            set(newValue) {
                this.$emit("update:modelValue", newValue);
                this.myValue = newValue;
            }
        },
        stringSliderValue() {
            return Util.formatSecondsTimeString(this.sliderValue);
        }
    }
}
</script>