shadcn.io is not affiliated with official shadcn/ui
Band Members Music Block for Svelte
A year Slider from 2009 to 2026 shows who was in a band that year, with a ruled row per member and a bar from the year they joined to the year they left, and a Collapsible bio on each row.
Installation
Overview
Let people see how a band changed over the years, with this line-up for Svelte with Ark UI. It follows The Ninth Ledger in Rosterhouse, a band history wiki, in a hairline frame with a plus mark on each corner. A Slider in the first band picks a year from 2009 to 2026, and a line worked out from the data says who was in the band that year and on what, for example "In 2016: 5 members. Dina on vocals and guitar, Osric on bass, ...". Under a ruled year scale each of eight members is a row with initials, a name, an instrument glyph, the role and a bar from the year they joined to the year they left: a departed member's bar ends, a current one runs to the edge. Members in the band in the chosen year are drawn at full weight with a tick, the rest are dimmed but still readable, and a row opens a Collapsible with a short bio. The time axis stays left to right in a right-to-left page. It's built from Slider, Collapsible, Guides, with a CSS entrance only. For band wikis, artist pages and history timelines.
FAQ
How do I add my own members?
Edit MEMBERS. A member has an id, initials, a name, a role as it reads in the sentence ("vocals and guitar"), a kind for the glyph (vocals, guitar, drums, keys), the year they join, the last year they were in the band as leave (0 for a current member) and a short bio. FIRST and LAST set the ends of the slider and the scale. The sentence, the count, the bars and the highlighted year are all worked out from those fields.
How does a member count as in the band?
A member is in the band in every year from the one they joined to the one they left, both included, so a member who left in 2017 is still shown in 2017. The count and the sentence use the same rule as the tick and the full weight on each row, and a screen reader hears "In the band" or "Not in the band" for the chosen year with each name.
How do I use the slider from the keyboard?
Focus it and use the arrow keys for one year, Page Up and Page Down for larger steps, and Home and End for 2009 and 2026. The slider's value text says the year and the member count, and a polite status line reads the sentence once you stop moving it.
What stays local in the demo?
The band, its members and their dates are all made up and typed. Opening a bio only changes the row. To make it real, load the members from your wiki's API and link each name to its page.