shadcn.io is not affiliated with official shadcn/ui
Range Slider Testimonial Reviews Block for React
A two-thumb star range picks which of a camera bag's 13 reviews you read, one full review at a time, with Previous and Next buttons, the arrow keys and a Review 2 of 10 counter.
Installation
Overview
A range-slider review reader for React with Base UI, for the Marlford Fieldkeeper 20, a fictional camera bag. A header with the title and one sentence sits over a split behind a divider. At the end, one full review at a time: read-only stars with their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words and a fixed date, then Previous and Next buttons around "Review 2 of 10". The arrow keys step through the reviews too, mirrored in a right-to-left page. At the start, a Slider with two thumbs, "Stars from 3 to 5", with a count of the 13 reviews for each star rating beneath it, solid where the range keeps them, and a polite line that says how many reviews match. Moving a thumb changes the set and starts again at its first review. The review cell holds the height of the longest review, so stepping never moves the page. On a phone the Slider sits above the review. All 13 reviews are typed at the top of the file and every count is worked out from them. It's built from Slider, Button, Rating, Avatar and Guides.
FAQ
How do I use my own reviews?
Replace REVIEWS at the top of the file, newest first. Each review has an id, name, rating from 1 to 5, an ISO date, a title, a body and verified. The counts under the Slider, the "10 of 13" line and "Review 2 of 10" are all worked out from that list. Keep at least one review at every star rating, or a range that lands on an empty rating can leave no review to show.
How does the Slider with two thumbs work?
The first thumb is the lowest star rating that counts, the second the highest, from 1 to 5. Drag them, or focus one and use the arrow keys, Home and End. The thumbs can meet ("Stars: 4 only"). Each thumb is named ("Lowest star rating", "Highest star rating") and reads its value as "3 stars".
The Slider takes value as an array and onValueChange with a number or an array; thumbs are named by aria-label.
How do I step through the reviews with the keyboard?
Press Tab to reach the review region, then Left and Right (or Previous and Next, which are real buttons). They wrap around the matching set, and a right-to-left page swaps the arrows. The counter "Review 2 of 10" is the visible position; moving the Slider resets to Review 1.
Related
- Pro
Featured Carousel Reviews
Cards and wallsA framed carousel of five editor's picks for a desk chair, each chosen by a rule worked out from ten typed reviews: most helpful, most detailed, best critical, newest verified and longest owned.
- Pro
Star Threshold Histogram Reviews
Score summariesA star-rating threshold for a lambswool blanket: a Slider sets the lowest rating that counts, a bracket spans the rows it keeps, and a reading panel gives the share that clears it and the newest review that does.
- Pro
Pinned Featured Reviews
Merchant toolsThree numbered pin slots for a bookshelf's reviews: pin from a list, move a pin up or down, unpin it, or replace a full slot through a Select.
- Pro
Minimal Slider Testimonials
Carousels and decksScrub through customer quotes for a shared-inbox app with a real range slider: five stops, one quote fading in at each, in a framed stage with + marks on its corners and the slider on a ruled foot, its position read out in words.
- Pro
Split View Reviews
Lists and pagesA master and detail split for six monitor reviews: a list where each row is a checkbox, a pane that shows the one you tick in full, or two side by side with a 'Both mention' line, and arrow keys that move between rows.
- Pro
Snippet Cards Reviews
Cards and wallsEight review snippet cards on shared hairlines for a yoga mat: each leads with its most helpful sentence, and a Sheet opens the whole review with Previous and Next buttons and a polite counter.