Skip to content

Progress bar

The ProgressBar field renders a progress element on Index and Show views and and a input[type=range] element on Edit and New views.

ruby
field :progress, as: :progress_bar
An Avo index table with ID, Name and Progress columns where each row shows a progress bar with its percentage value.

max

Sets the maximum value of the progress bar.

Default

100

Possible values

Any number.

step

Sets the step in which the user can move the slider on the Edit and New views.

Default

1

Possible values

Any number.

display_value

Choose if the value is displayed on the Edit and New views above the slider.

Default

true

Possible values

true, false

value_suffix

Set a string value to be displayed after the value above the progress bar.

Default

nil

Possible values

% or any other string.

Examples

ruby
field :progress,
  as: :progress_bar,
  max: 150,
  step: 10,
  display_value: true,
  value_suffix: "%"
An Avo edit-form card containing a progress_bar field showing the value above a range slider configured with max 150, step 10 and a percent suffix.