It would be awesome if you could show a demo or document how to implement half stars.

Documentation doesn't show how to enable half-stars, or how to hook to selection events about star-rating.js HOT 2 CLOSED

pryley commented on June 19, 2024

Documentation doesn't show how to enable half-stars, or how to hook to selection events

from star-rating.js.

Comments (2)

pryley commented on June 19, 2024 1

Additionally, how would I hook on to click events? Say, a user selected the 3rd stay, and I'd like to fire off a function when that happens. Can you please document how would one do that?

Simply use the native change event on the SELECT element.

from star-rating.js.

brunodbo commented on June 19, 2024

I was looking for this as well, and it looks like half stars aren't supported - see #8.

My need for half stars was on the display side (i.e., displaying of averages of rating results, for 1-5 star ratings), and I was able to get it working like this (importing the library's SASS file into my own, and adding this):

// Support half stars when displaying rating results
#{sr(parent)} .#{sr(base-classname)}-stars.s15 > span:nth-child(-1n+1),
#{sr(parent)} .#{sr(base-classname)}-stars.s25 > span:nth-child(-1n+2),
#{sr(parent)} .#{sr(base-classname)}-stars.s35 > span:nth-child(-1n+3),
#{sr(parent)} .#{sr(base-classname)}-stars.s45 > span:nth-child(-1n+4) {
  background-image: sr(star-full);
}

#{sr(parent)} .#{sr(base-classname)}-stars.s5 > span:nth-child(1),
#{sr(parent)} .#{sr(base-classname)}-stars.s15 > span:nth-child(2),
#{sr(parent)} .#{sr(base-classname)}-stars.s25 > span:nth-child(3),
#{sr(parent)} .#{sr(base-classname)}-stars.s35 > span:nth-child(4),
#{sr(parent)} .#{sr(base-classname)}-stars.s45 > span:nth-child(5) {
  background-image: sr(star-half);
}

from star-rating.js.

Recommend Projects