Vertical Slider Board Features Block for React

Edit CHANNELS at the top of the file: each has a name, a hint, a starting level, and offset, scale and suffix that turn the slider's 0 to 100 into the reading shown ("1 to 60 min", "0 to 12 h"). Keep six for the layout, or change the count and the model together.

pagesOf and caughtOf multiply a factor per channel: more sensitivity means more pages, and every other channel quiets them. It is a sample model for the demo and says so under the board. Replace both functions with your own incident history; the band, the verdict and the live region read from them.

Each fader is a slider with its own tab stop. The arrow keys nudge it, Home and End jump to the ends, and Page Up and Page Down move it in larger steps. Its value is read as words ("25 min", "62 percent"). While you drag the numbers update at once, and the result is announced once when you let go, in a polite live region.

It is a ten-segment readout beside each fader that lights up to the fader's level. It is decorative and hidden from assistive technology; the reading above the fader says the same thing in text.

The six channels sit in a row that scrolls sideways, with the next channel peeking as the cue and each snapping into place, and the list is named "Alert settings". The composite band stays above it. Nothing makes the page itself scroll sideways at 320 pixels.

They look and read the same on all four. The values come through each library's own slider: Ark UI, Base UI, Radix and React Aria each report them in their own shape, and the block turns each into the same number. The ports for Vue, Svelte and Solid use the Ark UI slider.