Threshold Slider Form
Alert threshold form with paired warning and critical sliders, live readouts, a zone bar that redraws as thumbs move, and a duration select.
Alert threshold form with paired warning and critical sliders, live readouts, a zone bar that redraws as thumbs move, and a duration select.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Threshold Slider Form sets CPU alert levels with paired sliders. Warning and critical thresholds each carry a live percentage readout, and a zone bar below them redraws the ok, warning, and critical bands as the thumbs move. A sustained duration select controls how long usage must stay over a threshold before an alert fires.
Both thresholds live in state and the critical value is validated to stay above warning; when it drops below, the helper line turns into a concrete correction naming the warning percent and Save thresholds disables. The zone bar is a flex row of three spans whose widths come straight from the two values, so the preview can never drift from the numbers it describes.
Reach for this block on a monitoring or alerting settings page, wired to your metrics backend. The paired slider shape suits any bounded metric where two ordered thresholds define severity: CPU, memory, disk, queue depth, or error rate.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a host CPU alert rule. Other paired threshold forms:
Tip: driving the zone bar widths from the same state as the readouts is what keeps the preview honest as thumbs move.