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>