shadcn.io is not affiliated with official shadcn/ui
Range Slider Testimonial Reviews Block for Ark UI
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 Ark 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 reads onValueChange with { value }, and minStepsBetweenThumbs is not set so the thumbs can meet.
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.