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

[assafmuller]

It would be awesome if you could show a demo or document how to implement half stars. You package an image called half-star but I didn't see code support for half stars. Can you please clarify?

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?

[brunodbo]

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);
}

[pryley]

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.