simple vue3 progressbar

progressbar.vue

<template>
  <div class="progress" :data-label="percent + '%'">
    <span
      class="value"
      :style="{ width: percent + '%', backgroundColor: getColor }"
    ></span>
  </div>
  <input type="range" min="0" max="100" v-model="percent" />
</template>

<script>
import { computed, reactive, ref } from "vue";
export default {
  setup() {
    const percent = ref(0);

    //array of progresses
    const mylist = [
      { progress: 10, color: "#13c2c2" },
      { progress: 40, color: "#ffc069" },
      { progress: 60, color: "#fadb14" },
      { progress: 80, color: "#389e0d" },
    ];

    //retrieve all progress values
    const sweeterArray = mylist.map((sweetItem) => {
      return sweetItem.progress;
    });

    //finds closest value for progress
    const findClosest = (arr, num) => {
      if (arr == null) {
        return;
      }
      return arr.reduce((prev, current) =>
        Math.abs(current - num) < Math.abs(prev - num) ? current : prev
      );
    };
    
    
    //computes closest value
    const closestValue = computed(() => {
      return findClosest(sweeterArray, percent.value);
    });
    
    
    //returns colour based on closests value
    const getColor = computed(() => {
      return mylist.find((x) => x.progress == closestValue.value).color;
    });

    return {
      percent,
      getColor,
    };
  },
};
</script>

<style>
.progress {
  height: 1.5em;
  width: 100%;
  background-color: #c9c9c9;
  position: relative;
}
.progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  top: 5px;
  left: 0;
  right: 0;
}
.progress .value {
  display: inline-block;
  height: 100%;
}
</style>