Star Rating

<link rel="stylesheet" href="styles/star-rating.css">
<script src="javascript/star-rating.js"></script>

<!-- Interactive Rating -->
<div data-rsl-star-rating data-star-value="3.5"></div>

<!-- Read-only Display -->
<div data-rsl-star-rating data-star-value="4.2" data-star-readonly="true"></div>

<!-- With Form Integration -->
<div data-rsl-star-rating
     data-star-name="review_rating"
     data-star-required="true"
     data-star-label="Rate your experience"></div>

// Get/Set values
const rating = document.querySelector('[data-rsl-star-rating]');
const value = RSL.StarRating.getValue(rating);
RSL.StarRating.setValue(rating, 4.5);

// Listen for changes
rating.addEventListener('rsl-star-change', function(e) {
    console.log('New rating:', e.detail.value);
    console.log('Previous rating:', e.detail.oldValue);
});

// Clear rating
RSL.StarRating.clear(rating);

<!-- Star Rating Filter (publishes to FilterBus) -->
<div id="rating-filter"></div>

<script>
// Create filter-mode star rating
RSL.StarRating.createFilter(document.getElementById('rating-filter'), {
    field: 'minRating',        // FilterBus field name
    label: 'Minimum Rating'
});

// Other components subscribe to 'minRating' field
// e.g., Smart Table filters rows where rating >= selected value
</script>

<!-- Products table subscribes to rating filter -->
<table data-rsl-smart-table data-filter-subscribe="minRating">
    <!-- Rows with data-rating attribute will be filtered -->
</table>