A control with a price. Most buttons are free: you press, something happens, and nothing about the button says what it spent. The one on the right states its price on the control, needs a deliberate hold to commit, and if you let go early it cancels and says so, because a silent cancel is indistinguishable from a control that does not work. The dial's detents are exact and the readout shows the snapped value, never where your finger is. The sliders are real range inputs. The pop-out menu lives in the top layer, which is the only thing that escapes a themed surface's stacking context.
import 'overscan'
import 'overscan/overscan.css'
<ov-hold
label="purge sector 4"
price="vents 40% reserve"
hold="900"
></ov-hold>import { OvHold } from 'overscan/react'
<OvHold
label="purge sector 4"
price="vents 40% reserve"
hold="900"
/>import { OvHold } from 'overscan/vue'
<OvHold
label="purge sector 4"
price="vents 40% reserve"
hold="900"
/>import OvHold from 'overscan/svelte/OvHold.svelte'
<OvHold
label="purge sector 4"
price="vents 40% reserve"
hold="900"
/>import 'overscan'
import 'overscan/overscan.css'
<ov-hold
label="PURGE SECTOR 4"
price="VENTS 40% RESERVE"
hold="900"
></ov-hold>import { OvHold } from 'overscan/react'
<OvHold
label="PURGE SECTOR 4"
price="VENTS 40% RESERVE"
hold="900"
/>import { OvHold } from 'overscan/vue'
<OvHold
label="PURGE SECTOR 4"
price="VENTS 40% RESERVE"
hold="900"
/>import OvHold from 'overscan/svelte/OvHold.svelte'
<OvHold
label="PURGE SECTOR 4"
price="VENTS 40% RESERVE"
hold="900"
/>