Ratings

Default Rating


<div class="ratings" dir="ltr">
    <span class="rating">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
</div>

JavaScript Interaction


<div class="ratings" dir="ltr">
    <span class="rating">
        <i class="ri-heart-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-fill"></i>
    </span>
</div>

Setting and Getting Values


<div class="ratings" dir="ltr">
    <span class="rating">
        <i class="ri-heart-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-heart-line"></i>
    </span>
</div>

RTL Support


<div class="ratings" dir="rtl">
    <span class="rating">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-fill"></i>
    </span>
</div>

Read-only and Preset Value


<div class="ratings" dir="rtl">
    <span class="rating">
        <i class="ri-star-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-line"></i>
    </span>
    <span class="rating ms-2">
        <i class="ri-star-line"></i>
    </span>
</div>