nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.62k stars 1.42k forks source link

[Progress-indicator] Progress with Indicator #2655

Open nico-limo opened 6 months ago

nico-limo commented 6 months ago

Is your feature request related to a problem? Please describe.

I would like have the number indicator from Progress, at top from where is the line limit

On this example I harcoded the values to show where I want the value. NuxtUi have the indicator

image

Example code

    <Progress
        aria-label="Loading..."
        value={borrowLimitUsed}
        valueLabel={borrowLimitUsed.toFixed(2)}
        showValueLabel
        size="sm"
        classNames={{
          value: `absolute right-[720px] bottom-4`,
        }}
      />

Describe the solution you'd like

Adding a div that have conditional to show it or not, with same width that the fulfilled linea

Describe alternatives you've considered

Not alternative found

Screenshots or Videos

Expected Result will be something like this image

linear[bot] commented 6 months ago

ENG-611 [Progress-indicator] Progress with Indicator

HydenLiu commented 6 months ago

Maybe, You can use this https://nextui.org/docs/components/slider#value-formatting