Linear Bar

Class: FxLinearBar · Tag: <fx-linear-bar> · Mixins: Animatable (via FxLinearTrackElement)

The <fx-linear-bar> component is a read-only linear level indicator featuring a sleek outer shell, a recessed track well, a vibrant gradient fill, and an optional tick-mark scale. Since it is designed purely for monitoring telemetry, it has no thumb and does not accept pointer input.

By default (is-segmented), the fill is segmented by subtle divider lines, creating a high-tech multi-cell look. Set is-segmented to false for a smooth, uninterrupted gradient fill.

---

Installation

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

import '@salsafx/ui';

Interactive preview of the main variants:

Segmented

Continuous

Horizontal

---

Basic Usage

Vertical (Default)

Segmented fill with value display. Drag the potentiometer to drive the bar.

<fx-linear-bar
    value="62"
    min="0"
    max="100"
    ticks="11"
    length="280"
    label="Level"
    unit="%"
    is-animated
></fx-linear-bar>

Dual-side Scale

Ticks and labels on both sides of the track.

<fx-linear-bar
    value="40"
    min="0"
    max="100"
    ticks="11"
    sub-divisions="2"
    has-scale-labels
    ticks-side="both"
    label="Level"
    unit="%"
    caption="%"
    length="300"
    is-animated
></fx-linear-bar>

Horizontal

Horizontal orientation with ticks above (ticks-side="left") or below (ticks-side="right").

<fx-linear-bar
    value="62"
    min="0"
    max="100"
    orientation="horizontal"
    value-origin="start"
    ticks="11"
    sub-divisions="2"
    has-scale-labels
    ticks-side="left"
    label="Output"
    unit="%"
    length="100%"
    is-animated
    style="width: 100%;"
></fx-linear-bar>

<fx-linear-bar
    value="35"
    min="0"
    max="100"
    orientation="horizontal"
    value-origin="start"
    ticks="11"
    sub-divisions="2"
    has-scale-labels
    ticks-side="right"
    label="Gain"
    unit="%"
    length="100%"
    track-thickness="large"
    is-animated
    style="
        width: 100%;
        --fx-bar-gradient-start: #a78bfa;
        --fx-bar-gradient-middle: #8b5cf6;
        --fx-bar-gradient-end: #7c3aed;
    "
></fx-linear-bar>

---

Variants

Continuous fill (no segment lines) and rounded caps via is-rounded.

<fx-linear-bar
    id="linear-bar-continuous"
    value="68"
    min="0"
    max="100"
    ticks="11"
    label="Smooth"
    unit="%"
    length="260"
    is-animated
    style="
        --fx-bar-gradient-start: #fb7185;
        --fx-bar-gradient-middle: #f43f5e;
        --fx-bar-gradient-end: #e11d48;
    "
></fx-linear-bar>

<fx-linear-bar
    value="55"
    min="0"
    max="100"
    ticks="11"
    label="Rounded"
    unit="%"
    length="260"
    is-rounded
    is-animated
    style="
        --fx-bar-gradient-start: #34d399;
        --fx-bar-gradient-middle: #10b981;
        --fx-bar-gradient-end: #059669;
    "
></fx-linear-bar>

<script>
    customElements.whenDefined('fx-linear-bar').then(() => {
        const el = document.getElementById('linear-bar-continuous');
        if (el) el.isSegmented = false;
    });
</script>

Track thickness

Vertical bars at small, medium, and large side by side.

<fx-linear-bar
    track-thickness="small"
    value="45"
    ticks="11"
    label="Small"
    unit="%"
    length="260"
></fx-linear-bar>

<fx-linear-bar
    track-thickness="medium"
    value="62"
    ticks="11"
    label="Medium"
    unit="%"
    length="260"
></fx-linear-bar>

<fx-linear-bar
    track-thickness="large"
    value="78"
    ticks="11"
    label="Large"
    unit="%"
    length="260"
></fx-linear-bar>

---

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
value	value	Number	0	Current level value.
min	min	Number	0	Minimum value.
max	max	Number	100	Maximum value.
orientation	orientation	String	"vertical"	Track direction (“vertical” or “horizontal”).
length	length	String	""	Length along the travel axis (preset token or custom value).
valueOrigin	value-origin	String	"end"	Which end of the track the fill grows from (“start” or “end”).
trackThickness	track-thickness	String	"medium"	Track thickness preset: small (10px), medium (16px), large (24px), or a custom value.
isAnimated	is-animated	Boolean	true	Enables fluid, hardware-accelerated transitions when the value updates.
isSegmented	is-segmented	Boolean	true	Draws divider lines to split the fill into segments.
isRounded	is-rounded	Boolean	false	Rounds the corners of the track and fill.
disabled	disabled	Boolean	false	Disables the control and prevents user interaction.
hasWell	has-well	Boolean	true	Recessed well around the track.
hasShell	has-shell	Boolean	true	Shows the outer shell background and border.
ticks	ticks	Number	0	Number of major calibration ticks. When segmented, this determines the number of segments.
hasScaleLabels	has-scale-labels	Boolean	true	Shows numeric labels on major ticks.
ticksSide	ticks-side	String	"left"	Placement of the ticks relative to the track.
subDivisions	sub-divisions	Number	5	Minor divisions between major ticks.
spacing	spacing	Number	4	Spacing gap between the track and the tick marks.
hasValueDisplay	has-value-display	Boolean	true	Shows the value display below the bar.
label	label	String	""	Text label for the value display.
unit	unit	String	""	Unit shown in the value display.
caption	caption	String	""	Optional caption drawn on the scale (e.g., %).
decimals	decimals	Number	2	Number of decimal places for the displayed value.

Slots

Name	Description
scale	Overrides the default scale. Expects <fx-linear-scale>.
display	Overrides the value display. Expects <fx-value-display>. Only rendered when has-value-display is set.

CSS Custom Properties

Property	Default	Description
--fx-bar-width	110px (480px horizontal)	Shell width. Prefer length for the travel axis.
--fx-bar-height	480px (110px horizontal)	Shell height. Prefer length for the travel axis.
--fx-bar-radius	22px	Shell corner radius.
--fx-bar-background	#1e293b	Shell background.
--fx-bar-border	#334155	Shell border color.
--fx-bar-track-color	#0b111f	Unfilled track color.
--fx-bar-track-width	16px (medium)	Track thickness. Prefer track-thickness (small / medium / large).
--fx-bar-well-pad	5px	Padding inside the recessed well.
--fx-bar-well-background	var(--fx-bar-background)	Recessed well fill.
--fx-bar-gradient-start	#06b6d4	Fill gradient start.
--fx-bar-gradient-middle	#6366f1	Fill gradient middle.
--fx-bar-gradient-end	#a855f7	Fill gradient end.
--fx-linear-bar-segment-gap	2px	Thickness of the divider lines between cells.

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxMeasureElement
    class FxLinearTrackElement
    class FxLinearBar

    FxElement <|-- FxMeasureElement
    FxMeasureElement <|-- FxLinearTrackElement : Animatable
    FxLinearTrackElement <|-- FxLinearBar

See also Architecture.