Meter

A horizontal display indicating the measurement of a known (finite) quantity

Meter value

Sage Component

SageMeter

<!-- Default -->

<%= sage_component SageFormInput, {
  id: "pw-meter-example",
  input_type: "number",
  label_text: "Meter value",
  placeholder: "Meter value",
  value: "1",
  required: true,
  disabled: false,
  input_mode: "",
  pattern: "",
  max: "8",
  minlength: "",
  maxlength: "",
  has_error: false,
  message_text: "",
  prefix: "",
  suffix: "",
  has_placeholder: false
} %>

<%= sage_component SageMeter, {
  id: "pw-hint-meter",
  label: "Password strength",
  value: 1,
  max_value: 8,
  optimum_value: 6,
  low_value_text: "Weak password",
  med_value_text: "¯\\_(ツ)_/¯",
  high_value_text: "Not bad",
  max_value_text: "Strong password"
} %>

Property	Description	Type	Default
`high_value_text`	Sets the high value of the meter, indicating that a satisfactory value has been reached.	String	`nil`
`id` required	Unique identifier for this input field. Should match the `for` property on the corresponding label.	String	`nil`
`label`	Sets the label text for the component.	String	`nil`
`low_value_text`	Sets the low value of the meter indicating that an unsatisfactory has been reached.	String	`nil`
`max_value`	Assigns a maximum value to the meter. Required for updated styles to function.	Integer	`nil`
`max_value_text`	This property sets text for the maximum meter value.	String	`nil`
`med_value_text`	Sets the medium value of the meter indicating that a medium satisfactory has been reached.	String	`nil`
`optimum_value`	Sets the optimal value of the meter, indicating that a satisfactory value has been reached.	Integer	`nil`
`value`	The current meter value.	Integer	`nil`

A meter element is best used when measuring a known quantity. A typical example might be a breakdown of disk usage on a computer.

Don't

This component is not intended for use to measure progress or completion of a task or series of steps (use progress for this instead).