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

<template>
<div class="root">
    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" :disabled="isDisabled" />
    <span>{{ stringSliderValue }}</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,
        isDisabled: Boolean
    },
    emits: [ "update:modelValue" ],
    computed: {
        sliderValue: {
            get() {
                if (this.modelValue < 0 || this.isDisabled) {
                    return 0;
                }

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

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