Linear Gauge

Class: FxLinearGauge · Tag: <fx-linear-gauge> · Mixins: Animatable

The <fx-linear-gauge> component is a premium, capsule-style linear gauge designed to monitor temperature, liquid levels, fuel cells, and other critical telemetry limits. It supports both vertical and horizontal layouts, configurable gradient fills, and dual-scale configurations.

---

Installation

Register the component by importing it directly in your application entrypoint:

import '@salsafx/ui';

Interactive preview of the main variants:

°C / °F

Fuel

Sharp

---

Basic Usage

Standard Fuel Tank Indicator

Use the range slider below to adjust the active fill level and observe the smooth transitions.

Set Level (L):

Active Reading: 50 L

<fx-linear-gauge
    value="8"
    min="0"
    max="100"
    count="12"
    sub-divisions="1"
    value-origin="end"
    ticks-side="both"
    label="Fuel tank"
    unit="L"
    is-animated
></fx-linear-gauge>

Highly Segmented High-Precision Level Gauge

<fx-linear-gauge
    value="37"
    min="0"
    max="50"
    count="13"
    sub-divisions="2"
    value-origin="start"
    ticks-side="right"
    label="Reactant Fluid"
></fx-linear-gauge>

Dual-Scale Thermometer

A dual °C / °F scale with a custom blue → amber → red gradient.

Set Temperature (°C):

Active Reading: 79 °C

<fx-linear-gauge
    value="79"
    min="-30"
    max="100"
    label="Reactor Temp"
    unit="°C"
    value-origin="end"
    is-animated
    style="
        --fx-linear-gauge-width: 130px;
        --fx-linear-gauge-height: 330px;
        --fx-linear-gauge-gradient-start: #3b82f6;
        --fx-linear-gauge-gradient-middle: #f59e0b;
        --fx-linear-gauge-gradient-end: #ef4444;
    "
>
    <fx-linear-scale
        slot="scale"
        value="79"
        min="-30"
        max="100"
        count="13"
        sub-divisions="5"
        side="left"
        has-scale-connecting-line
        caption="°C"
    ></fx-linear-scale>
    <fx-linear-scale
        slot="scale"
        value="174.2"
        min="-22"
        max="212"
        count="13"
        sub-divisions="2"
        side="right"
        caption="°F"
        has-scale-connecting-line
    ></fx-linear-scale>
</fx-linear-gauge>

Horizontal Layout

Set orientation="horizontal" and size with --fx-linear-gauge-width / --fx-linear-gauge-height.

<fx-linear-gauge
    value="65"
    min="0"
    max="100"
    label="Process Temp"
    unit="°C"
    orientation="horizontal"
    ticks-side="left"
    value-origin="start"
    caption="°C"
    is-animated
    style="
        --fx-linear-gauge-width: 520px;
        --fx-linear-gauge-height: 110px;
        --fx-linear-gauge-gradient-start: #06b6d4;
        --fx-linear-gauge-gradient-middle: #6366f1;
        --fx-linear-gauge-gradient-end: #a855f7;
    "
></fx-linear-gauge>

---

Flat

Set hasShell to false to hide the outer capsule and show only the track and scales.

<fx-linear-gauge
    value="65"
    min="0"
    max="100"
    label="Coolant"
    unit="°C"
    orientation="horizontal"
    ticks-side="left"
    count="11"
    sub-divisions="2"
    value-origin="end"
    caption="°C"
    is-animated
    theme="dark"
    style="
        --fx-linear-gauge-width: clamp(280px, 70vw, 520px);
        --fx-linear-gauge-height: 110px;
    "
></fx-linear-gauge>

In markup, boolean false must be set via the property (element.hasShell = false) because a present has-shell attribute is always treated as true.

---

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
value	value	Number	0	Current value.
min	min	Number	0	Minimum value.
max	max	Number	100	Maximum value.
isAnimated	is-animated	Boolean	true	Enables fluid, hardware-accelerated transitions when the value updates.
disabled	disabled	Boolean	false	Disables the control and prevents user interaction.
hasScaleLabels	has-scale-labels	Boolean	true	Shows numeric labels on major ticks.
ticksSide	ticks-side	String	"left"	Placement of the ticks relative to the gauge.
count	count	Number	10	Number of major ticks.
subDivisions	sub-divisions	Number	5	Minor divisions between major ticks.
hasValueDisplay	has-value-display	Boolean	true	Shows the value display below the gauge.
label	label	String	""	Text label for the value display.
unit	unit	String	""	Unit shown in the value display.
orientation	orientation	"vertical" | "horizontal"	"vertical"	Layout orientation of the gauge and scale.
valueOrigin	value-origin	"start" | "end"	"end"	Which end of the track the fill grows from.
trackThickness	track-thickness	"small" | "medium" | "large" | "x-large" | Number	"medium"	Thickness of the gauge fill track.
caption	caption	String	""	Optional caption drawn on the scale (e.g., %).
spacing	spacing	Number	4	Spacing gap between the track and the tick marks.
hasScaleConnectingLine	has-scale-connecting-line	Boolean	false	Draws a baseline connecting the scale ticks.
theme	theme	"light" | "dark"	"dark"	Color theme preset (“light” or “dark”).
isRoundedTrack	is-rounded-track	Boolean	true	Rounds the corners of the track and fill.
isRoundedShell	is-rounded-shell	Boolean	true	Rounds the corners of the outer shell.
hasShell	has-shell	Boolean	true	Shows the outer shell background and border.

Slots

Name	Description
scale	Overrides scale beside the capsule. Expects <fx-linear-scale>.
display	Overrides bottom telemetry display panel. Expects <fx-value-display>.

CSS Custom Properties

Property	Default	Description
--fx-linear-gauge-width	120px (V) / 480px (H)	Outer layout boundary container width.
--fx-linear-gauge-height	480px (V) / 120px (H)	Outer layout boundary container height.
--fx-linear-gauge-shell-fill	theme-dependent	Capsule outer shell fill color.
--fx-linear-gauge-shell-stroke	theme-dependent	Capsule outer shell stroke color.
--fx-linear-gauge-track-color	#0f172a	Empty well / chamber color inside the capsule.
--fx-linear-gauge-shadow-opacity	0.20	Opacity of the inset shadow inside the empty well (0–1).
--fx-linear-gauge-gradient-start	#06b6d4	Gradient color at the value origin end.
--fx-linear-gauge-gradient-middle	#6366f1	Midpoint gradient color.
--fx-linear-gauge-gradient-end	#a855f7	Gradient color at the opposite end.
--fx-linear-gauge-transition	—	Fill transition timing when is-animated is enabled.

Scale & display

Property	Default	Description
--fx-linear-scale-color	theme-dependent	Tick mark stroke color.
--fx-linear-scale-label-color	theme-dependent	Scale number and caption text color.
--fx-linear-scale-label-font-size	9px	Font size for scale numbers and caption.
--fx-display-label-color	#94a3b8	Telemetry label text color below the gauge.
--fx-display-value-color	#ffffff	Telemetry value text color below the gauge.

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxMeasureElement
    class FxLinearGauge

    FxElement <|-- FxMeasureElement
    FxMeasureElement <|-- FxLinearGauge : Animatable

See also Architecture.