Zero-dependency rating input and display that follows your page's theme on its own. Hover, click, or Tab in and use the arrow keys — every card is live.
Hover the left half of a star for .5. One tab stop, arrow keys step by 0.5.
new Rating('#basic', {
value: 3.5,
onChange: v => console.log(v)
})
Built-in heart icon, same gold fill — or pass your own
{ empty, full } SVG pair.
new Rating('#hearts', {
icon: 'heart', value: 2
})
Fractions render exactly — the fill is a clipped overlay, so a 4.3 average shows a 30% fifth star. No focus, no interaction.
new Rating('#avg', {
value: 4.3, readOnly: true, size: 18
})
showValue prints the live number after the stars;
keys 1–9 jump straight to a value.
new Rating('#ten', {
max: 10, value: 7, half: false,
size: 18, showValue: true
})
Enhancing an <input> hides and syncs it — it still
submits, still fires change, and destroy() restores it.
<input id="score" name="score" value="3">
new Rating('#score') // submits score=3.5
Clicking the value that's already committed clears back to 0
(default). Set clearable: false to keep ratings sticky —
try both below.
new Rating(el, { clearable: false })