Rotary Selector

Class: FxRotarySelector · Tag: <fx-rotary-selector>

The <fx-rotary-selector> component is a premium, multimeter-style multi-sector rotary selector. It supports distinct groupings (such as voltmeters, resistance scales, and current channels) each containing nested sub-ranges for precise HMI mode selection.

---

Installation

import '@salsafx/ui';

---

Basic Usage

Drag the dial below or click the individual buttons at the bottom to transition between sectors!

<fx-rotary-selector selected-sector="off">
    <fx-rotary-selector-sector
        id="off"
        label="OFF"
        color="#ef4444"
        text-color="#ef4444"
        ranges='[]'
        start-deg="165"
        end-deg="195"
    ></fx-rotary-selector-sector>

    <fx-rotary-selector-sector
        id="acv"
        label="VOLTS AC"
        color="#3b82f6"
        text-color="#60a5fa"
        ranges='["600V", "200V", "20V"]'
        start-deg="195"
        end-deg="265"
    ></fx-rotary-selector-sector>
</fx-rotary-selector>

---

API Reference

<fx-rotary-selector> Properties

Property	Attribute	Type	Default	Description
selectedSector	selected-sector	String	""	ID of the currently selected sector.
selectedRange	selected-range	String	""	Currently selected sub-range value.
disabled	disabled	Boolean	false	Disables the control and prevents user interaction.
sectors	—	Array	[]	Array of sector configurations.

<fx-rotary-selector-sector> Properties

Property	Attribute	Type	Default	Description
id	id	String	""	Unique mode identifier.
label	label	String	""	Sector group label.
color	color	String	""	Sector highlight color.
textColor	text-color	String	""	Sector label text color.
ranges	ranges	Array	[]	Array of sub-range values.
startDeg	start-deg	Number	0	Starting angle of the sector in degrees.
endDeg	end-deg	Number	360	Ending angle of the sector in degrees.

Events

Name	Detail	Description
change	{ sectorId: String, range: String }	Emitted when dial snap snaps to a new position.

CSS Custom Properties

Property	Default	Description
--fx-size	280px	Outer dial diameter bounding size.
--fx-font	monospace	Monospaced digital font family representation.
--fx-gap	20px	Bottom padding spaces of values.

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxRotarySelector

    FxElement <|-- FxRotarySelector

See also Architecture.