star-rating-svg.js

examples

// basic example
<div class="my-rating"></div>

$(".my-rating").starRating({
  initialRating: 4,
  starSize: 25
});

---

// grab rating from a data attribute
<div> class="my-rating-2" data-rating="2.5"></div>

$(".my-rating-2").starRating({
  totalStars: 5,
  starSize: 40,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'crimson',
  useGradient: false
});

---

// define a gradient
<div> class="my-rating-3"></div>

// specify the gradient start and end for the selected stars
$(".my-rating-3").starRating({
  starSize: 80,
  strokeWidth: 9,
  strokeColor: 'black',
  initialRating: 2,
  starGradient: {
      start: '#93BFE2',
      end: '#105694'
  }
});

---

// execute callback when rating
<div> class="my-rating-4"></div>

$(".my-rating-4").starRating({
  totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 4,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      alert('rated ', currentRating);
      console.log('DOM element ', $el);
  }
});

---

// read only mode
<div> class="my-rating-4"></div>

$(".my-rating-5").starRating({
  readOnly: true
});

---

// unloading the plugin instance
$(".my-rating").starRating('unload');

---

// use full stars only
<div> class="my-rating-6"></div>

$(".my-rating-6").starRating({
  useFullStars: true
});

---

// on hover event
<span> class="my-rating-7"></span>
<span> class="live-rating"></span>

  $(".my-rating-7").starRating({
    initialRating: 3.5,
    disableAfterRate: false,
    onHover: function(currentIndex, currentRating, $el){
      $('.live-rating').text(currentIndex);
    },
    onLeave: function(currentIndex, currentRating, $el){
      $('.live-rating').text(currentRating);
    }
  });