Documentation
ef-dial
This is a circular dial that a user drags to set a value between 0 and 360 degrees.
This is a circular dial that a user drags to set a value between 0 and 360 degrees.
CSS Parts
CSS parts| Part | Description |
|---|
container | The circular background of the dial. |
handle | A draggable knob that shows the current value. |
value | The numeric readout at the center of the dial. |
CSS Custom Properties
CSS custom properties| Property | Default | Description |
|---|
--dial-stroke | var(--ef-color-border, rgba(255,255,255,0.16)) | Color of the dial's outer ring and tick marks' base stroke. |
--dial-tick | var(--ef-color-border-subtle, rgba(255,255,255,0.08)) | Color of the four cardinal tick marks. |
Events
Events| Event | Detail | Description |
|---|
change | { value: number } | Fires each time the user drags the dial to a new value. |