While building a star rating widget for AMP, I've evaluated 40+ GitHub projects, codepends, Fiddles and StackOverflow samples. Here are the results, excluding projects that had no stars or issues, or have not been updated in more than two years.
Some widgets insist on using only CSS. This has academic value, but is an unrealistic requirement, and makes it impossible to get other functionality right, such as keyboard accessibility that doesn't go backwards.
Other widgets depend on jQuery (most often), React, Angular, or Vue. Hard to see how this is necessary, when writing plain JavaScript modules is a much better idea for serveral good reasons.
- Touch and mouse (pointer) friendly
- Customizable number of stars
- Half-stars, even fluid/fully fractional stars input
- Read-only/display a given (possibly fractional) rating
- Configurable icons instead of stars, or images/SVGs
- Clean scalable vector icons (e.g. Font Awesome) for consistent display across devices, instead of images
- Custom styles for the icons
- Optional selection result/label (updated on hover or after click)
- Configurable tooltips and captions for each star value
- Optional animated feedback on selection
- After click and the selection "sticking", mousing over it shows the new potential selection in a visually different way, and the existing selection persists until the next click/tap (Lea Verou)
- Keyboard accessibility: right arrow increases the rating, left arrow decreases it
- "Clear" button
- Right-To-Left input support
- dandv's CSS-only properly keyboard-accessible solution
- half stars, clear, not accessible - reverse DOM order
- Lea Verou's radio buttons (2011) with keyboard accessibility (though buggy - perssing arrow keys goes backwards), and selected stars are offset by a few pixels in Firefox:
- https://css-tricks.com/star-ratings/ - 2012, using
unicode-bidi: bidi-override;. Mouseover flicker. - radio buttons, not keyboard-accessible, but selection "sticks"; - pixel shift on hover
- half stars, stickiness, Font Awesome; 2015
- no reversal but not keyboard accessible, not sticky, no half stars
Notable libraries without dependencies
- starability - uses images, keyboard arrows work reversed
- BioPhoton - long feature list, no demo, docs need proofreading
- SVG-based, no keyboard accessibility; public domain license
- geminilabs; lots of JS, keyboard arrows still work backwards
- juliangruber's; no real commits since 2013, no feature list; JS API
- PolymerLabs has a component, that depends on
iron-icon - cvmartinez's component depending on Polymer's paper-icon
- Nevraeka's - keyboard accessibility, custom # of stars, custom size
- Krajee's full-featured Bootstrap + jQuery star-rating plugin: SVG, customizable icons, fractional rating, RTL support. Not accessible.
- antenna.io jQuery bar rating - great documentation, keyboard accessible via Tab (though not arrows); display but not input fractional stars
- Auxiliary's rater - customizable UTF-8 characters, Font-Awesome icons, or even HTML; supports half ratings
- awesome-rating - customizable Font-Awesome icons
- jQuery RateIt
- vue-star-rating - half-star rating, fluid rating
- SVG-based jQuery plugin with good list of features: different shapes, half stars, read-only mode, onhover and onrating callbacks/events
- react - 79 stars; no color change on hover
<input type="number">- <
input type="range">by catharsys <input type="range">by @keithchu
- Adobe Spry
- CallMeNick's - nothing special, abandoned since 2015
- [many others omitted]