A lightweight jQuery plugin for rendering a SVG based star rating system on your webpage that supports for arbitrary star fractions, variable star sizes and colors.
Use class .rating
to display ratings.
<div class="rating my-rating-1 mb-1" data-rating="2.5"></div>
<div class="rating rating-yellow my-rating-1" data-rating="2"></div>
Name | Values | description |
---|---|---|
data-rating="[value]" |
1 / 2 / 3 / 4 / 5 | Disply the ratings |
<!-- Tinymce JS -->
<script src="dist/js/jquery.star-rating-svg.min.js"></script>
$(".my-rating-1").starRating({
disableAfterRate: false
});
Use class .rating-progressive
with rating class.
<div class="rating my-rating-2 rating-progressive" data-rating="3"></div>
You can prevent the ratings from user intraction by enabling readOnly: true
.
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
$(".my-rating-4").starRating({
readOnly: true,
disableAfterRate: false
});
You can enable tooltip in ratings using tooltipActive: true
.
<div class="rating my-rating-5 mb-1" data-rating="4"></div>
<div class="rating rating-yellow my-rating-5" data-rating="3"></div>
$(".my-rating-5").starRating({
tooltipActive: true,
disableAfterRate: false,
});
Use class .rating-lg, rating-xl
classes for different sizes.
<div class="rating my-rating-1 mb-2" data-rating="2"></div>
<div class="rating rating-lg ratings my-rating-1 mb-2" data-rating="2"></div>
<div class="rating rating-xl my-rating-1" data-rating="2"></div>