# Progress: Custom range and format

> Set `min` and `max` for any range, `format` for the number, and a function child on `<ProgressValue />` for the text. Give screen readers the same words with `getAriaValueText`.

Example: https://hextaui.com/docs/progress/examples/format
Component docs: https://hextaui.com/docs/progress.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/progress-format.json
```

This adds `components/examples/progress/format.tsx` with the Progress component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/progress/format.tsx"
"use client"

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

export function ProgressFormat() {
  return (
    <div className="w-full max-w-sm">
      <Progress
        value={37.5}
        max={50}
        format={{ maximumFractionDigits: 1 }}
        getAriaValueText={(formatted) => `${formatted} of 50 GB used`}
      >
        <ProgressLabel>Storage</ProgressLabel>
        <ProgressValue>{(formatted) => `${formatted} of 50 GB`}</ProgressValue>
      </Progress>
    </div>
  )
}
```

## Props in this example

### Progress

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | null makes the bar indeterminate. |
| `max` | `number` | `100` |  |
| `format` | `Intl.NumberFormatOptions` | – | Formats the value. Without it, the value shows as a percentage. |
| `getAriaValueText` | `(formattedValue: string, value: number \| null) => string` | – |  |

## More Progress examples

- [Sizes](https://hextaui.com/docs/progress/examples/sizes.md)
- [Status](https://hextaui.com/docs/progress/examples/variants.md)
- [Segments](https://hextaui.com/docs/progress/examples/segments.md)
- [Indeterminate](https://hextaui.com/docs/progress/examples/indeterminate.md)
- [Circle](https://hextaui.com/docs/progress/examples/circle.md)
- [Indeterminate circle](https://hextaui.com/docs/progress/examples/circle-indeterminate.md)
- [Animated value](https://hextaui.com/docs/progress/examples/number-flow.md)
- [Long labels](https://hextaui.com/docs/progress/examples/files.md)
- [Without a visible label](https://hextaui.com/docs/progress/examples/unlabeled.md)
- [Right to left](https://hextaui.com/docs/progress/examples/rtl.md)