Star Rating Examples

<div data-rsl-star-rating data-star-size="small" data-star-value="4"></div>
<div data-rsl-star-rating data-star-size="medium" data-star-value="4"></div>
<div data-rsl-star-rating data-star-size="large" data-star-value="4"></div>
<div data-rsl-star-rating data-star-size="xl" data-star-value="4"></div>

<!-- Stars (default) -->
<div data-rsl-star-rating data-star-icon="star" data-star-value="4.5"></div>

<!-- Hearts for favorites/likes -->
<div data-rsl-star-rating data-star-icon="heart" data-star-value="4"></div>

<!-- Thumbs for approval ratings -->
<div data-rsl-star-rating data-star-icon="thumb" data-star-value="3.5"></div>

<div data-rsl-star-rating
     data-star-value="4"
     data-star-color="#9c27b0"
     data-star-empty-color="#e1bee7">
</div>

<div class="product-card">
    <img src="product.jpg" alt="Product" class="product-image">
    <h3 class="product-title">Premium Wireless Headphones</h3>
    <div class="product-rating">
        <div data-rsl-star-rating
             data-star-value="4.5"
             data-star-readonly="true"
             data-star-size="small"></div>
        <span class="product-reviews">(2,847 reviews)</span>
    </div>
    <div class="product-price">$299.00</div>
</div>

<form class="review-form">
    <div data-rsl-star-rating
         data-star-name="rating"
         data-star-required="true"
         data-star-label="Your Rating"
         data-star-clearable="true"
         data-star-size="large"></div>

    <textarea name="review" placeholder="Tell us about your experience..."></textarea>

    <button type="submit">Submit Review</button>
</form>

<div class="comparison-grid">
    <div class="comparison-item">
        <h4>Basic Plan</h4>
        <div data-rsl-star-rating
             data-star-value="3"
             data-star-readonly="true"
             data-star-show-value="true"></div>
        <p>Good for starters</p>
    </div>
    <div class="comparison-item">
        <h4>Pro Plan</h4>
        <div data-rsl-star-rating
             data-star-value="4"
             data-star-readonly="true"
             data-star-show-value="true"></div>
        <p>Most popular</p>
    </div>
    <div class="comparison-item">
        <h4>Enterprise Plan</h4>
        <div data-rsl-star-rating
             data-star-value="5"
             data-star-readonly="true"
             data-star-show-value="true"></div>
        <p>Full features</p>
    </div>
</div>

<!-- 3-star rating -->
<div data-rsl-star-rating data-star-max="3" data-star-value="2"></div>

<!-- 10-star rating (like IMDB) -->
<div data-rsl-star-rating data-star-max="10" data-star-value="7"></div>

const rating = document.getElementById('my-rating');

// Set value programmatically
RSL.StarRating.setValue(rating, 4.5);

// Get current value
const value = RSL.StarRating.getValue(rating);

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

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