Range Slider Thresholds Form Block for React

Edit the constants at the top: WARN_AT and CRITICAL_AT (the saved thresholds), GAP (the least the thumbs stay apart) and READINGS (the typed samples). zoneOf decides which zone a value falls in, and the zones strip, the legend, the readings and the sentence all come from it, so a new unit or a third line only needs that helper and the legend list.

No. The slider itself keeps the thumbs a gap apart. In every version the block also runs the same keepGap helper on the value it receives, so the gap holds even if a library lets two thumbs touch. A move that would close the gap is held at it, or refused outright by some libraries, and the other thumb stays put.

The slider is named "CPU use thresholds" and each thumb says what it sets as its value text: "Warn at 70%" and "Critical at 90%". The figures above the track are visible text, so nothing depends on where the thumbs sit or on a colour. The arrow keys move a thumb by one, Page Up and Page Down by more, and Home and End to its ends.

Dragging or holding an arrow key would queue dozens of announcements. The visible line updates at once, and the polite status region says it once, 600 ms after the last change. Save thresholds is quiet while nothing changed and says "No changes to save." if pressed; Reset puts the saved values back and says so.

Nothing is saved to a monitor: Save thresholds says "Saved in this demo. Nothing was sent." and keeps the new values as the saved ones for the rest of the visit. To make it real, send the two numbers from the submit handler, validate the gap and the range on your server, and show its answer in the same status line. The sample readings are typed; feed them from your metrics.

Store the pair as one array value. With react-hook-form, use Controller, pass field.value to the slider and call field.onChange with the result of keepGap; a resolver can check the gap again. With TanStack Form, keep the two values in one field and validate the gap in onChange.