Potentiometer

Class: FxPotentiometer · Tag: <fx-potentiometer> · Mixins: Animatable

The <fx-potentiometer> component is a high-precision, tactile rotary knob designed for industrial system dials, tuning controls, and fine calibration equipment.

Installation

import '@salsafx/ui';

Interactive preview of the main variants:

Smooth

Detented

Rect Knob

Basic Usage

Smooth Analog Knob

Click and drag the metallic knob below to rotate it! Supports multi-touch inputs and fine dial precision.

<fx-potentiometer
    value="40"
    min="0"
    max="100"
    label="Volume"
    unit="%"
    style="--fx-potentiometer-size: 220px;"
></fx-potentiometer>

Detented (snap-to-ticks)

<fx-potentiometer
    value="35"
    min="0"
    max="100"
    ticks="9"
    snap-to-ticks
    label="Frequency Tune"
    unit="MHz"
    style="
        --fx-potentiometer-size: 200px;
        --fx-potentiometer-theme-color: #10b981;
    "
>
    <fx-radial-scale
        slot="scale"
        value="35"
        min="0"
        max="100"
        count="8"
        sub-divisions="5"
        start-angle="-135"
        arc-length="270"
        has-scale-labels
    ></fx-radial-scale>
</fx-potentiometer>

Metallic Knob

<fx-potentiometer
    value="6"
    min="0"
    max="10"
    ticks="11"
    snap-to-ticks
    label="Drive"
    style="
        --fx-potentiometer-size: 220px;
        --fx-potentiometer-theme-color: #f59e0b;
    "
>
    <fx-metalic-knob slot="knob"></fx-metalic-knob>
</fx-potentiometer>

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.
`startAngle`	`start-angle`	`Number`	`-135`	Starting rotation limit in degrees (0 is top/12 o’clock).
`arcLength`	`arc-length`	`Number`	`270`	Total sweep degrees of rotation from start to end bounds.
`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.
`ticks`	`ticks`	`Number`	`0`	Number of major ticks.
`snapToTicks`	`snap-to-ticks`	`Boolean`	`false`	Snaps the knob to major ticks.
`hasValueDisplay`	`has-value-display`	`Boolean`	`false`	Shows the value display below the knob.
`label`	`label`	`String`	`""`	Text identifier label.
`unit`	`unit`	`String`	`""`	Measurement unit description.

Slots

Name	Description
`knob`	Center dial knob. Defaults to `<fx-knob>`. Pass a custom element (e.g. `<fx-metalic-knob>`) with `slot="knob"` to replace it.
`scale`	Overrides calibration markers. Expects `<fx-radial-simple-scale>`.
`display`	Overrides bottom value panel. Expects `<fx-value-display>`.

Events

Name	Detail	Description
`input`	`{ value: Number }`	Emitted continuously as the knob is rotated.
`change`	`{ value: Number }`	Emitted once when dragging is released.

CSS Custom Properties

Property	Default	Description
`--fx-potentiometer-size`	`220px`	Outer dial diameter width and height.
`--fx-potentiometer-bezel-fill`	`#1e293b`	Outer bezel / plate fill.
`--fx-potentiometer-bezel-stroke`	`#334155`	Outer bezel outline color.
`--fx-potentiometer-track-color`	`#0f172a`	Inactive rotational track background color.
`--fx-potentiometer-theme-color`	`#06b6d4`	Default knob pointer accent (and legacy fill accent).
`--fx-potentiometer-gradient-start`	`#06b6d4`	Active arc gradient start.
`--fx-potentiometer-gradient-middle`	`#6366f1`	Active arc gradient middle.
`--fx-potentiometer-gradient-end`	`#a855f7`	Active arc gradient end.
`--fx-knob`	`#1e293b`	Default `<fx-knob>` fill.
`--fx-knob-ring`	`#334155`	Default `<fx-knob>` stroke.
`--fx-knob-pointer`	theme color	Default `<fx-knob>` pointer tick.
`--fx-radial-scale-color`	`#475569`	Tick mark stroke color.
`--fx-radial-scale-label-color`	`#64748b`	Tick number label color.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxMeasureElement
    class FxPotentiometer

    FxElement <|-- FxMeasureElement
    FxMeasureElement <|-- FxPotentiometer : Animatable