Meter

Import the component in the script section of your Svelte file:

import Meter from 'svve11/Meter.svelte'
            

Creating a Meter

To supply the meter with its contents, a value attribute and an options object are passed as props to the meter. These can be defined in the script section of the .svelte file or imported in from another location.

The value attribute is required and defined as follows:

• value (number): sets the current value of the meter. Must be within the minValue to maxValue range. It is recommended to use a reactive variable to allow meter value to change as necessary.

The options object has 12 properties:

Required Props

• maxValue (number): sets the maximum value for the meter range
• minValue (number): sets the minimum value for the meter range.
• meterLabel (string): sets the text label for the meter. The label will be automatically joined with a percentage calculation, unless otherwise specified. See displayDecimal in optional props section below.
• id (number): sets the id for the meter. Remember to provide different id numbers when instantiating more than one meter on a page as the id should be unique.

Optional Props

• highValue (number): sets the value from which a current value above is considered high. Must be less than maxValue and greater than the minValue and lowValue.
• lowValue (number): sets the value from which a current value below is considered low. Must be greater than minValue and less than the maxValue and highValue.
• optimumValue (number): sets the optimal numeric value of the meter. Must be a number between the minValue and maxValue. If the optimal value is set between the minValue and lowValue, or the maxValue and highValue, this range is considered optimal. Different browsers will color the bar differently depending on where the current value falls in relation to the optimal value.
• valueText (string): used for assistive technologies that read the value of the meter to the users. Most assistive technologies will read value as a percentage by default, thus this props should be provided if a percentage read does not make sense in the context of your meter use.
• displayDecimal (boolean): this will default to false. If set to true, this indicates to the meter that the value should not be presented as a percentage. This prop must be accompanied by the units prop described next.
• units (string): sets the units to be displayed in the meter label should the percentage appearance not be relevant.
• meterstyle (string): sets the style for the meter for any custom styles.
• labelStyle (string): sets the style for the meter label for any custom styles.

Example Options Object:

const meterOptions = {
	maxValue: 100,
	minValue: 0,
	meterLabel: 'Demo meter',
	id: 1,
	lowValue: 20,
	highValue: 85,
	optimumValue: 80
};
					

Instantiating a Meter

<Meter value={reactiveValue} options={meterOptions}/>
              

Example meter with only required props:

Example meter with highValue=85, lowValue=20 and optimalValue=80 props:

Example meter with displayDecimal=false and units props:

Example meter with style strings: