star-rating-svg.js

Native JavaScript, no dependencies. Data attributes init, rating scale (e.g. 0..10).

examples

Basic implementation

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

StarRating(".my-rating", {
  initialRating: 4,
  strokeColor: '#894A00',
  strokeWidth: 10,
  starSize: 25
});

---

Rounded star shape

<div class="my-rating-4" data-rating="2.5"></div>

StarRating(".my-rating-4", {
  totalStars: 5,
  starShape: 'rounded',
  starSize: 40,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'crimson',
  useGradient: false
});

---

Use gradients

<div class="my-rating-5"></div>

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

---

Execute callback when rating

<div class="my-rating-6"></div>

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

---

read only mode

<div class="my-rating-7"></div>

StarRating(".my-rating-7", {
  readOnly: true
});

---

Use fullstars

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

StarRating(".my-rating-8", {
  useFullStars: true
});

---

On hover event

<span class="my-rating-9"></span>
<span class="live-rating"></span>

StarRating(".my-rating-9", {
  initialRating: 3.5,
  disableAfterRate: false,
  onHover: function(currentIndex, currentRating, el){
    document.querySelector('.live-rating').textContent = currentIndex;
  },
  onLeave: function(currentIndex, currentRating, el){
    document.querySelector('.live-rating').textContent = currentRating;
  }
});

rating level colors

<div class="my-rating-10"></div>

// specify the color per rating level
StarRating(".my-rating-10", {
  starSize: 80,
  strokeWidth: 9,
  strokeColor: 'black',
  ratedColors: ['#e2c181', '#ffa700', '#c4573e', '#9a321a', '#5e1e0f'],
  initialRating: 2
});

---

5 stars, rating 0..10 (valueMultiplier)

5 stars displayed, but rating range 0..10 — half-star = step 1.

<span class="my-rating-11"></span>
<span class="live-rating-scale"></span>

StarRating(".my-rating-11", {
  totalStars: 5,
  valueMultiplier: 2,
  initialRating: 7,
  disableAfterRate: false,
  onHover: function(currentIndex, currentRating, el){
    document.querySelector('.live-rating-scale').textContent = currentIndex;
  },
  onLeave: function(currentIndex, currentRating, el){
    document.querySelector('.live-rating-scale').textContent = currentRating;
  }
});

---

Rating labels (tooltips on hover)

Native title tooltips for each half-star. Hover to see labels for 1..10.

StarRating(".my-rating-labels", {
  totalStars: 5,
  valueMultiplier: 2,
  initialRating: 7,
  disableAfterRate: false,
  ratingLabels: [
    'Very bad', 'Bad', 'Not so bad', 'Normal', 'Average',
    'Almost good', 'Good', 'Very good', 'Excellent', 'Perfect'
  ]
});

---

Data attributes: only markup

All options from data attributes, no JS options.

<span class="demo-data-only" 
  data-total-stars="5" 
  data-value-multiplier="2" 
  data-initial-rating="7" 
  data-disable-after-rate="false" 
  data-star-size="35"></span>

StarRating(".demo-data-only");

---

Data attributes: mixed (data + JS callbacks)

Config from data, callbacks from JS.

3

<span class="demo-mixed" data-total-stars="5" data-initial-rating="3"></span>

StarRating(".demo-mixed", {
  disableAfterRate: false,
  onHover: function(i, r, el){ document.querySelector('.live-rating-mixed').textContent = i; },
  onLeave: function(i, r, el){ document.querySelector('.live-rating-mixed').textContent = r; }
});

---

Data attributes: JS overrides data

Element has data-initial-rating="5", JS passes initialRating: 2.

StarRating(".demo-override", { initialRating: 2 });

---

Multiple ratings: different data each

Three ratings: 0..10, 0..5, readOnly.

StarRating(".demo-multi");

---

Multiple ratings: same data

Two elements with identical data attributes.

StarRating(".demo-same");

---

Mixed init: data vs JS on same page

First via data, second via JS only.

StarRating(".demo-data-vs-js");
StarRating(".demo-js-only", { totalStars: 5, initialRating: 4, starSize: 28 });

---