The <luna-rating> component displays interactive star ratings with support for fractional precision and whole-number snapping.
Paths
/lunadom/components/rating/rating.js REQUIRED
Basic Usage
Fractional Precision
Whole Number Snapping
Different Sizes
Custom Stars Count
Custom Colors
Readonly & Disabled
Interactive Control with Range Slider
Overrides
Attributes
value - Current rating value (default: 0)
max - Total number of stars (default: 5)
precision - Step precision for fractional ratings (e.g. 0.5) (default: 1)
whole - Snap to whole integers only (1, 2, 3...)
readonly - Disables interaction, displays value only
disabled - Disables interaction with reduced opacity
size - Star size preset (sm, md, lg) (default: md)
label - Label displayed above stars
CSS Variables
--luna-star-active - Fill color of active stars
--luna-star-empty - Fill color of empty stars
--luna-star-size - Override star size directly
--luna-rating-label-color - Label text color
--luna-rating-label-size - Label font size
Events
luna-change - Emitted when the rating value changes.
{ value: number }
Example Code
<!-- Basic rating -->
<luna-rating
label="Rate this product"
value="3"
size="md"
></luna-rating>
<!-- Half-star precision -->
<luna-rating
label="Half Stars"
value="3.5"
precision="0.5"
></luna-rating>
<!-- Whole numbers only -->
<luna-rating
label="Whole Stars Only"
value="4"
whole
></luna-rating>
<!-- Custom star count -->
<luna-rating
label="10-Star Scale"
value="7"
max="10"
></luna-rating>
<!-- Custom colors -->
<luna-rating
value="4"
style="--luna-star-active: #ef4444;"
></luna-rating>
<!-- Readonly -->
<luna-rating
value="4.5"
readonly
></luna-rating>
<!-- Listen to changes -->
<luna-rating id="my-rating" value="3"></luna-rating>
<script>
const rating = document.getElementById('my-rating');
rating.addEventListener('luna-change', (e) => {
console.log('New rating:', e.detail.value);
});
</script>
<!-- Sync with range slider -->
<luna-range
id="rating-controller"
min="0"
max="5"
step="0.1"
value="3.5"
></luna-range>
<luna-rating
id="controlled-rating"
value="3.5"
precision="0.1"
></luna-rating>
<script>
const range = document.getElementById('rating-controller');
const rating = document.getElementById('controlled-rating');
range.addEventListener('luna-input', (e) => {
rating.value = e.target.value;
});
rating.addEventListener('luna-change', (e) => {
range.value = e.detail.value;
});
</script>