Sneat Dashboard FREE by ThemeSelection

Star Ratings

We use Raty.js for our star rating component. Raty.js is a flexible, lightweight star rating library that supports custom SVGs as well as image-based stars, giving you complete control over the appearance of your ratings.
Read the official Raty-js Documentation for a full list of instructions and other options.

Usage

In order to use raty-js on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/raty-js/raty-js.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/raty-js/raty-js.js"><script>

We are using custom-svgs for stars. you can find them here extended-ui-star-ratings.js.

let r = parseInt(window.Helpers.getCssVar('gray-200', true).slice(1, 3), 16);
let g = parseInt(window.Helpers.getCssVar('gray-200', true).slice(3, 5), 16);
let b = parseInt(window.Helpers.getCssVar('gray-200', true).slice(5, 7), 16);

const halfStarGray = window.Helpers.getCssVar('gray-200', true).replace('#', '%23');
const halfStarGradient = isRtl
  ? "%3Cstop offset='50%25' style='stop-color:" +
    halfStarGray +
    "' /%3E%3Cstop offset='50%25' style='stop-color:%23FFD700' /%3E"
  : "%3Cstop offset='50%25' style='stop-color:%23FFD700' /%3E%3Cstop offset='50%25' style='stop-color:" +
    halfStarGray +
    "' /%3E";
const fullStarSVG =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' %3E%3Cpath fill='%23FFD700' d='M21.947 9.179a1 1 0 0 0-.868-.676l-5.701-.453l-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107l-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082c.297-.268.406-.686.278-1.065'/%3E%3C/svg%3E";
const halfStarSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='halfStarGradient'%3E${halfStarGradient}%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23halfStarGradient)' d='M21.947 9.179a1 1 0 0 0-.868-.676l-5.701-.453l-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107l-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082c.297-.268.406-.686.278-1.065'/%3E%3C/svg%3E`;
const emptyStarSVG =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' %3E%3Cpath fill='rgb(" +
  r +
  ',' +
  g +
  ',' +
  b +
  ")' d='M21.947 9.179a1 1 0 0 0-.868-.676l-5.701-.453l-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107l-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082c.297-.268.406-.686.278-1.065'/%3E%3C/svg%3E";

To use CSS variables for colors in your SVG elements, you can utilize the getCssVar() function. please, Ensure the colors are specified in rgba format for optimal compatibility within SVG.

rgba(window.Helpers.getCssVar('primary-rgb', true), 1)
            or
rgba(119, 92, 220, 1)

Examples

Basic

To create ratings just create a <div>, initialize and thats it!

<div class="basic-ratings raty" data-score="3" data-number="5"></div>

const basicRatings = document.querySelector('.basic-ratings');
if (basicRatings) {
  let ratings = new Raty(basicRatings, {
    starOn: fullStarSVG,
    starHalf: halfStarSVG,
    starOff: emptyStarSVG
  });
  ratings.init();
}

Read Only

Use data-read-only="true" attribute with HTML element or use readOnly property in JS to create a read only ratings

<div class="read-only-ratings raty" data-read-only="true" data-score="3" data-number="5"></div>

const readOnlyRatings = document.querySelector('.read-only-ratings');
if (readOnlyRatings) {
  let ratings = new Raty(readOnlyRatings, {
    number: 5,
    starOn: fullStarSVG,
    starHalf: halfStarSVG,
    starOff: emptyStarSVG
  });
  ratings.init();
}

Custom SVG

You can also use different SVGs for various star ratings to customize the appearance of each rating level uniquely.

<div class="custom-svg-ratings raty" data-score="2" data-number="5"></div>

const customSvg = document.querySelector('.custom-svg-ratings');
const customFullStarSVG =
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD700' d='m6.516 14.323l-1.49 6.452a.998.998 0 0 0 1.529 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082a1 1 0 0 0-.59-1.74l-5.701-.454l-2.467-5.461a.998.998 0 0 0-1.822 0L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713zm2.853-4.326a1 1 0 0 0 .832-.586L12 5.43l1.799 3.981a1 1 0 0 0 .832.586l3.972.315l-3.271 2.944c-.284.256-.397.65-.293 1.018l1.253 4.385l-3.736-2.491a.995.995 0 0 0-1.109 0l-3.904 2.603l1.05-4.546a1 1 0 0 0-.276-.94l-3.038-2.962z'/%3E%3C/svg%3E";
const customEmptyStarSVG =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(" +
  r +
  ',' +
  g +
  ',' +
  b +
  ")' d='m6.516 14.323l-1.49 6.452a.998.998 0 0 0 1.529 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4l4.536-4.082a1 1 0 0 0-.59-1.74l-5.701-.454l-2.467-5.461a.998.998 0 0 0-1.822 0L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713zm2.853-4.326a1 1 0 0 0 .832-.586L12 5.43l1.799 3.981a1 1 0 0 0 .832.586l3.972.315l-3.271 2.944c-.284.256-.397.65-.293 1.018l1.253 4.385l-3.736-2.491a.995.995 0 0 0-1.109 0l-3.904 2.603l1.05-4.546a1 1 0 0 0-.276-.94l-3.038-2.962z'/%3E%3C/svg%3E";
  if (customSvg) {
  let ratings = new Raty(customSvg, {
    starOn: customFullStarSVG,
    starHalf: customHalfStarSVG,
    starOff: customEmptyStarSVG
  });
  ratings.init();
}

Half Star

Use data-half="true" attribute with HTML element or use halfShow property.

<div class="half-star-ratings raty" data-half="true" data-score="3.5" data-number="5"></div>

const halfStar = document.querySelector('.half-star-ratings');
if (halfStar) {
  let ratings = new Raty(halfStar, {
    starOn: fullStarSVG,
    starHalf: halfStarSVG,
    starOff: emptyStarSVG
  });
  ratings.init();
}

Events

Refer below example to use ratings events.

onSet Event

onChange Event

Ratings:

<div class="col-md d-flex flex-column align-items-start mb-sm-0 mb-4">
  <small class="fw-medium">onSet Event</small>
  <div class="onset-event-ratings raty" data-score="3" data-number="5" data-half="true"></div>
</div>
<div class="col-md d-flex flex-column align-items-start">
  <small class="fw-medium">onChange Event</small>
  <div class="onChange-event-ratings raty mb-4" data-score="0" data-number="5" data-half="true"></div>
  <div class=" counter-wrapper">
    <span class="fw-medium">Ratings:</span>
    <span class="counter"></span>
  </div>
</div>

const onSetEvents = document.querySelector('.onset-event-ratings'),
  onChangeEvents = document.querySelector('.onChange-event-ratings');
// onSet Event
if (onSetEvents) {
  let ratings = new Raty(onSetEvents, {
    starOn: fullStarSVG,
    starHalf: halfStarSVG,
    starOff: emptyStarSVG,
    click: function (score) {
      alert('The rating is set to ' + score + ' !');
    }
  });
  ratings.init();
}

// onChange Event
if (onChangeEvents) {
  let ratings = new Raty(onChangeEvents, {
    starOn: fullStarSVG,
    starHalf: halfStarSVG,
    starOff: emptyStarSVG,
    mouseover: function (score) {
      const counterElement = onChangeEvents.parentElement.querySelector('.counter');
      if (counterElement) {
        counterElement.textContent = score.toFixed(1);
      }
    },
    mouseout: function () {
      const counterElement = onChangeEvents.parentElement.querySelector('.counter');
      if (counterElement) {
        counterElement.textContent = ratings.score();
      }
    }
  });
  ratings.init();
}

Methods

Refer below example to use ratings methods.

<div class="methods-ratings raty" data-score="1" data-number="5"></div>
<div class="demo-inline-spacing">
  <button class="btn btn-primary btn-initialize">Initialize</button>
  <button class="btn btn-danger btn-destroy">Destroy</button>
  <button class="btn btn-success btn-get-rating">Get Ratings</button>
  <button class="btn btn-info btn-set-rating">Set Ratings to 1</button>
</div>

const ratingMethods = document.querySelector('.methods-ratings'),
  initializeRatings = document.querySelector('.btn-initialize'),
  destroyRatings = document.querySelector('.btn-destroy'),
  getRatings = document.querySelector('.btn-get-rating'),
  setRatings = document.querySelector('.btn-set-rating');
let currentScore = 1;
let ratingInstance = null;

// initialize rating
function initializeRating(score = currentScore) {
  if (!ratingInstance) {
    ratingInstance = new Raty(ratingMethods, {
      starOn: fullStarSVG,
      starHalf: halfStarSVG,
      starOff: emptyStarSVG,
      click: function (newScore) {
        currentScore = newScore;
      },
      readOnly: false,
      rtl: isRtl
    });
    ratingInstance.init();
  }
}

initializeRating(currentScore);

// destroy rating
function destroyRating() {
  if (ratingInstance) {
    ratingMethods.innerHTML = '';
    ratingInstance = null;
  } else {
    alert('Please Initialize Ratings First');
  }
}

// Get Current Rating
function getRating() {
  if (ratingInstance) {
    alert('Current Ratings are ' + currentScore);
  } else {
    alert('Please Initialize Ratings First');
  }
}

// set rating
function setRating(score) {
  if (ratingInstance) {
    destroyRating();
    initializeRating(score);
  } else {
    alert('Please Initialize Ratings First');
  }
}

if (initializeRatings) {
  initializeRatings.addEventListener('click', () => initializeRating(currentScore));
}

if (destroyRatings) {
  destroyRatings.addEventListener('click', destroyRating);
}

if (getRatings) {
  getRatings.addEventListener('click', getRating);
}

if (setRatings) {
  setRatings.addEventListener('click', () => setRating(1));
}

Rating with icons

Basic

You can also use desired icons as a stars in ratings.

<div class="icon-star-ratings" data-score="3" data-number="5"></div>

const iconStar = document.querySelector('.icon-star-ratings');
if (iconStar) {
  let ratings = new Raty(iconStar, {
    starType: 'i',
    starOff: 'icon-base icon-xl bx bxs-heart bg-danger-subtle',
    starOn: 'icon-base icon-xl bx bxs-heart text-danger'
  });
  ratings.init();
}

Size variants

You can use icon-{size} class to change the size of stars.

<div class="icon-star-sm-ratings" data-score="1" data-number="5"></div>
<div class="icon-star-md-ratings" data-score="2" data-number="5"></div>
<div class="icon-star-lg-ratings" data-score="3" data-number="5"></div>

const iconStarSm = document.querySelector('.icon-star-sm-ratings'),
iconStarMd = document.querySelector('.icon-star-md-ratings'),
iconStarLg = document.querySelector('.icon-star-lg-ratings');
if (iconStarSm) {
  let ratings = new Raty(iconStarSm, {
    starType: 'i',
    starOff: 'icon-base bx bxs-star bg-secondary-subtle',
    starOn: 'icon-base bx bxs-star text-secondary'
  });
  ratings.init();
}

if (iconStarMd) {
  let ratings = new Raty(iconStarMd, {
    starType: 'i',
    starOff: 'icon-base icon-xl bx bxs-star bg-secondary-subtle',
    starOn: 'icon-base icon-xl bx bxs-star text-secondary'
  });
  ratings.init();
}

if (iconStarLg) {
  let ratings = new Raty(iconStarLg, {
    starType: 'i',
    starOff: 'icon-base icon-42px bx bxs-star bg-secondary-subtle',
    starOn: 'icon-base icon-42px bx bxs-star text-secondary'
  });
  ratings.init();
}

Class	Value
`class="icon-{size}"`	xs \| sm \| md \| lg \| xl

Colour variants

You can use bg-{color}-subtle class for star-off and text-{color} class for star-on to change the colors.

<div class="icon-star-primary-ratings" data-score="1" data-number="5"></div>
<div class="icon-star-warning-ratings" data-score="2" data-number="5"></div>
<div class="icon-star-success-ratings" data-score="3" data-number="5"></div>
<div class="icon-star-danger-ratings" data-score="4" data-number="5"></div>

const iconStarPrimary = document.querySelector('.icon-star-primary-ratings'),
iconStarWarning = document.querySelector('.icon-star-warning-ratings'),
iconStarSuccess = document.querySelector('.icon-star-success-ratings'),
iconStarDanger = document.querySelector('.icon-star-danger-ratings');
if (iconStarPrimary) {
  let ratings = new Raty(iconStarPrimary, {
    starType: 'i',
    starOff: 'icon-base icon-xl bx bxs-star bg-primary-subtle',
    starOn: 'icon-base icon-xl bx bxs-star text-primary'
  });
  ratings.init();
}

if (iconStarWarning) {
  let ratings = new Raty(iconStarWarning, {
    starType: 'i',
    starOff: 'icon-base icon-xl bx bxs-star bg-warning-subtle',
    starOn: 'icon-base icon-xl bx bxs-star text-warning'
  });
  ratings.init();
}

if (iconStarSuccess) {
  let ratings = new Raty(iconStarSuccess, {
    starType: 'i',
    starOff: 'icon-base icon-xl bx bxs-star bg-success-subtle',
    starOn: 'icon-base icon-xl bx bxs-star text-success'
  });
  ratings.init();
}

if (iconStarDanger) {
  let ratings = new Raty(iconStarDanger, {
    starType: 'i',
    starOff: 'icon-base icon-xl bx bxs-star bg-danger-subtle',
    starOn: 'icon-base icon-xl bx bxs-star text-danger'
  });
  ratings.init();
}

Class	Value
`bg-{color}-subtle or text-{color}`	primary \| secondary \| success \| danger \| warning \| info \| dark