shadcn.io is not affiliated with official shadcn/ui
Vertical Slider Board Features Block for Svelte
A board of six vertical sliders for an alert-tuning tool, each with a level meter and a readout, and a composite readout of pages a week and incidents caught worked out from the six settings.
Installation
Overview
A slider board for Svelte with Ark UI. Six channels, each a vertical slider with a level meter beside it, a name, a reading and a one-line hint, sit in one hairline frame with + marks on its corners, divided by hairlines. A band across the top shows what the six settings add up to: the pages a week a team would get, the share of real incidents still caught, and a one-word verdict. Move a fader and the band moves with it. On a phone the channels scroll sideways in a named strip. The page's rails and top rule come from the Guides spine. It's built from Slider, Badge and Guides, and your theme's tokens for every colour. For monitoring, tuning and settings pages that want to show a trade-off, not just list it.
FAQ
How do I change the channels?
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.
Where do the composite numbers come from?
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.
Which keys work on a fader?
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.
What is the meter for?
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.
How does it fit on a phone?
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.
Do the sliders behave the same on every base?
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.