Indicator on Progress Bar doesnt show true value (if value is over 100)

[moshetanzer]

Environment

• Operating System: Windows_NT
• Node Version: v18.16.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@9.5.1
• Builder: -
• User Config: modules, image, ssr, app, nitro, runtimeConfig, devtools, plausible, googleFonts, css
• Runtime Modules: @nuxt/ui@2.12.0, @nuxtjs/plausible@0.2.4, @nuxtjs/google-fonts@3.1.3, @nuxt/image@1.2.0
• Build Modules: -

---

Version

latest

Reproduction

<UProgress :value="150" indicator />

Description

When using UProgress sometimes values exceed 100, for example in the use case of raising money. Obviously it is arguable if there should be a max of more than 100. However, what seems definate like in BS5 and many other progress libs - the indicator should show the current value even if it is over 100.

Additional context

No response

Logs

No response

[benjamincanac]

@DarkGhostHunter Any hint on this?

[moshetanzer]

@benjamincanac just wanted to follow up on this. I see you are quite active on this repo 😊. Think that this should be done. To avoid this interfering with anyone's current use cases why don't we add a prop to set max and keep the default at 100?

[benjamincanac]

This was actually the default behaviour but this has been changed in #939.

[moshetanzer]

🤯 OMG. I beg to differ! Cant believe it. It maybe would have made sense that this should be default but think that value is value and shouldnt be messed with? Also, there are many use cases that going over 100 is a nessacity for example fundraising, workout training etc.. Is there any chance this can be "fixed"?

[benjamincanac]

Have you tried using the #indicator slot? https://ui.nuxt.com/elements/progress#indicator

[moshetanzer]

hi @benjamincanac

Thanks for your help.

yip did try that. Also, check source code - it is force limited to realMax of 100.

Just commented on this pull that you quoted.

Maybe there is logic to this, but at this point unless it can be explained this this pr should be reverted? Am i wrong?

#939

[moshetanzer]

@benjamincanac What would you suggest as a temporary fix for this?

[benjamincanac]

Like I said, I would use the #indicator slot:

<script setup>
const value = ref(110)
</script>

<template>
  <UProgress :value="value" :max="100">
    <template #indicator>
      {{ value }}%
    </template>
  </UProgress>
</template>

[DarkGhostHunter]

There is no point on getting the real value when inside the progress bar you already have access to the real value from outside. It's like:

That's why I limited it to 100%. It's semantically correct for the value of the progress bar, NOT the value that comes to the progress bar (that could be 150).

That's why the <template #indicator> is useful.

I consider this not a bug.

[moshetanzer]

Like I said, I would use the #indicator slot:

<script setup>
const value = ref(110)
</script>

<template>
  <UProgress :value="value" :max="100">
    <template #indicator>
      {{ value }}%
    </template>
  </UProgress>
</template>

Hi @benjamincanac

Thanks of your time.

This indicator doesn't follow the percentage. I.e. if the percentage is at 80 percent or 20% the indicator stays in the center - and doesnt follow as the percentage grows. So Yip doesnt really work - since to achieve this one could just put {{value}} on top of the uprogress.

Thanks ❤️

[moshetanzer]

@DarkGhostHunter

Hi,

Thanks!

But as is explained when you use that slot the percentage does not follow the progress. So it is essentially just like putting {{value}} on top of it.

See reproduction
https://stackblitz.com/edit/nuxt-starter-hujwmy?file=app.vue

Not sure if i understand what you are explaining...

[maxsteinwand]

But as is explained when you use that slot the percentage does not follow the progress. So it is essentially just like putting {{value}} on top of it.

You need to add a div with text-right class and set the width to the percentage of the progress. Then it will move with the bar.

<UProgress :value="value" :max="100">
    <template #indicator="{ percent }">
      <div class="text-right" :style="{ width: `${percent}%` }">
        {{ value }}%
      </div>
    </template>
  </UProgress>

[moshetanzer]

Hi @maxsteinwand,

Hope you well.

Thanks for this!

Do you think this should be default behavior of the slot? Since this does solve the issue.

Appreicate it!

[maxsteinwand]

Imo it should stay as is. The Indicator slot should be styleable all by yourself and not already move the text for you.