shadcn.io is not affiliated with official shadcn/ui
Cohort Slider Team Block for Vue
Forty-three people of a payroll service by the year they joined: a slider labelled The year you joined, a group of avatars for who came that year, and two quotes from that year in cells split by a hairline.
Installation
Overview
A team section for Vue with Ark UI, for Pennock & Co, a payroll service. A centred header sits over a band with a slider labelled The year you joined, from Year 1 to Year 6, with a button under each year, and a group of avatars with a line saying how many people joined that year. Under the band two cells, split by a hairline from md, each hold a short thing someone from that year says about the company. Every year's pair of quotes is also drawn unseen in the same place, so moving the slider never moves the page. On a phone the buttons show only the number and the two quotes stack. It's built from Slider, Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. The people and counts are example data.
FAQ
How do I change the years and the people?
Edit COHORTS at the top of the file: a year, how many people joined, the people the avatars show (the first two are the voices) and two voices, each with a name, a role and a short text. The slider's range and the buttons come from the array's length; the avatar group shows four and a count for the rest.
How do I use it with a keyboard?
Tab goes to the slider's thumb: the arrow keys move a year at a time, and Home and End jump to Year 1 and Year 6. The thumb says "Year 3", not a bare number, and a polite line reads out how many people joined. The year buttons under the slider are real buttons that report which year is chosen.
Does the block move as I slide?
No. The pair of quotes for every year is drawn a second time, unseen and hidden from assistive technology, in the same cell, so the cell holds the tallest pair. The avatar group and the count line have fixed widths, so nothing beside them moves.
Do all seven targets behave the same?
Yes. The thumb is drawn in the foreground colour on every target. The thumb stays inside the track, so the year buttons are inset by half its width to sit under it.