Fader

Class: FxFader · Tag: <fx-fader> · Mixins: Animatable (via FxLinearTrackElement)

The <fx-fader> component is a skeuomorphic fader control for mixers, SCADA panels, and flight / HMI dashboards. It supports vertical and horizontal orientation, an optional recessed well, tick scales, and a value display.

Installation

import '@salsafx/ui';

Interactive preview of the main variants:

Default

Detented

Horizontal

Basic Usage

Vertical Fader (Default)

Drag the thumb to change the value. The default fill uses the theme three-stop gradient.

<fx-fader
    value="62"
    min="0"
    max="100"
    length="280"
    is-animated
></fx-fader>

Detented Fader with Value Display

Snap-to-ticks calibration on both sides, with the built-in measure value display.

<fx-fader
    value="40"
    min="0"
    max="100"
    ticks="11"
    sub-divisions="2"
    snap-to-ticks
    fit-ticks
    has-scale-labels
    ticks-side="left"
    has-value-display
    label="Level"
    unit="%"
    length="300"
    style="--fx-bar-width: 110px;"
></fx-fader>

Horizontal Fader

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

<fx-fader
    value="62"
    orientation="horizontal"
    value-origin="start"
    ticks="11"
    sub-divisions="2"
    snap-to-ticks
    fit-ticks
    has-scale-labels
    ticks-side="left"
    length="320"
    style="--fx-bar-height: 110px;"
></fx-fader>

Flat

Set hasShell to false for a borderless flat look — no outer shell background or border.

<fx-fader
    value="62"
    min="0"
    max="100"
    orientation="horizontal"
    value-origin="start"
    ticks="11"
    sub-divisions="2"
    fit-ticks
    has-scale-labels
    ticks-side="left"
    length="100%"
    style="width: 100%; --fx-bar-height: 110px;"
></fx-fader>

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 selected 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 length).
`valueOrigin`	`value-origin`	`String`	`"end"`	Which end of the track the fill grows from (“start” or “end”).
`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.
`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.
`snapToTicks`	`snap-to-ticks`	`Boolean`	`false`	Snaps the thumb to major ticks.
`fitTicks`	`fit-ticks`	`Boolean`	`false`	Aligns the end ticks with the center of the thumb at its minimum and maximum positions.
`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`	`false`	Shows the value display below the fader.
`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>` (layout offsets are synced by the fader).
`display`	Overrides the value display. Expects `<fx-value-display>`. Only rendered when `has-value-display` is set.

Events

Name	Detail	Description
`input`	`{ value: Number, displayValue: Number }`	Emitted continuously while dragging.
`change`	`{ value: Number, displayValue: Number }`	Emitted once when dragging ends.

CSS Custom Properties

Property	Default	Description
`--fx-bar-width`	`97px` (`480px` horizontal)	Shell width. Prefer `length` for the travel axis.
`--fx-bar-height`	`480px` (`97px` 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`	`10px`	Track thickness (fixed for fader; use CSS var to override).
`--fx-bar-well-pad`	`5px`	Padding inside the recessed well.
`--fx-bar-well-background`	`var(--fx-bar-background)`	Recessed well fill.
`--fx-bar-thumb-size`	`28px`	Thumb width and height.
`--fx-bar-thumb-background`	`#121a2b`	Thumb face color.
`--fx-bar-thumb-grip`	`#000000`	Grip line color on the thumb.
`--fx-bar-gradient-start`	`#06b6d4`	Fill gradient start.
`--fx-bar-gradient-middle`	`#6366f1`	Fill gradient middle.
`--fx-bar-gradient-end`	`#a855f7`	Fill gradient end.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxMeasureElement
    class FxLinearTrackElement
    class FxFader

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