Flux Product Docs
  • What is Flux?
  • Guides
    • Creating a Premium Video
    • Creating Your First Site
    • Creating a Countdown
    • Creating a Navigation Bar
    • Creating a Group
    • Custom 404 Page
    • Adding a Favicon to Your Site
    • Adding Videos to Your Site
    • Managing Your Guest List
    • Asset Management
    • Creating Sites from Site Templates
    • Publishing Site Versions
    • Advanced Debugging
  • Fundamentals
    • Key Concepts
    • Sites
    • Guests
    • Environments
      • Show Variables
    • Flows
      • Anatomy of a Node
      • Connecting Nodes and Building Flows
      • Passing Data
      • Scope
      • Interpolation
    • Keyboard Shortcuts
      • Keyboard Shortcuts - Page Editor
    • Animation States
    • Local Variables
    • Groups
  • Use Cases
    • For Designers
    • For Engineers
      • Custom CSS
      • Custom Modules
    • For Event Manager
      • Intercom Integration
  • Documentation
    • FAQ
    • Glossary
    • 🚀Show Controller
      • Modes
    • Domains and Subdomains
      • Hover
      • AWS Route 53
    • Premium Live Channels
    • Basic Video
    • Premium Video
      • AI Generated Subtitles
      • Supported Input Codecs and Containers
      • Supported Language Labels
      • Serverside Forensic Watermarking
    • Flow Nodes
      • Middleware
  • Modules
    • Access Code
    • Audio
    • Button
    • Carousel
    • Chat
    • Checkbox
    • Container
    • Countdown
    • Date
    • Embed
    • Image
    • Intercom
    • Link
    • Lottie
    • Page
    • Meter
    • Modal
    • Photobooth Gallery
    • Open Login
    • QR Code
    • Radio
    • Rich Text
    • Stack
    • Style
    • Spline
    • Switch
    • Text Input
    • Video
  • Template Guides
    • NatGeo FYC
      • Adding a Panel
    • Meow Wolf All Shrimps
  • 🚀Change Logs
    • July 12, 2024
    • June 08, 2024
    • April 26, 2024
    • April 12, 2024
    • March 29, 2024
    • March 15, 2024
    • March 1, 2024
    • September 2022
    • August 2022
    • July 2022
    • June 2022
Powered by GitBook
On this page
  • Overview
  • Properties
  • Meter Type
  • Start Angle
  • End Angle
  • Meter Stroke
  • Min Value
  • Max Value
  • Initial Value
  • Style Properties
  • Min Height
  • Max Height
  • Min Width
  • Max Width
  • Width
  • Height
  • Background Color
  • Start Color
  • End Color
  • Broadcasters
  • On Complete
  • Listeners
  • Set Value
  • Set Min Value
  • Set Max Value

Was this helpful?

  1. Modules

Meter

Last updated 1 year ago

Was this helpful?

Overview

The meter module allows for radial and linear meters. These are useful for showing progress, cooldowns, and other percentage based indicators.

Properties

Meter Type

Default: Radial

Whether the meter should be radial or linear in presentation.

Start Angle

Only available on Radial meters

The start angle of the radial meter in degrees. Vertical is 0. Can be negative.

End Angle

Only available on Radial meters

The start angle of the radial meter in degrees. Vertical is 0. Can be negative.

Meter Stroke

Only available on Radial Meters

The weight of the stroke in percentage of radius. For example, a meter 100px wide, with a 50 stroke would have a 25px stroke.

Min Value

The minimum value of the meter.

Max Value

The maximum value of the meter.

Initial Value

The initial value of the meter when the Module is loaded.

Style Properties

Min Height

The minimum height of the meter.

Max Height

The maximum height of the meter.

Min Width

The minimum width of the meter.

Max Width

The maximum width of the meter.

Width

The width of the meter.

Height

The height of the meter.

Background Color

The background color of the meter.

Start Color

The color of the meter progress at the minimum value.

End Color

The color of the meter progress at the maximum value.

Broadcasters

On Complete

Fires when the current value reaches the minimum or maximum value.

Value
Type
Description
Path

Type

"maximum" | "minimum"

Whether the meter reached the minimum or maximum value.

meta.type

Listeners

Set Value

Sets the current value of the meter.

Parameter
Type
Description

Value

number

The new value to set the meter to.

Set Min Value

Sets the minimum value of the meter.

Parameter
Type
Description

Value

number

The new value to set the minimum value to.

Set Max Value

Sets the maximum value of the meter.

Parameter
Type
Description

Value

number

The new value to set the maximum value to.

Radial and Linear Meters