Star Rating

Yangshun TayEx-Meta Staff Engineer
Languages

Create a star rating widget that allows users to select a rating value.

Requirements

  • The widget accepts three parameters: the maximum number of stars, the number of currently filled stars, and a callback fired with the new value whenever the rating changes.
  • When a star is clicked, it is filled along with all the stars to its left, and the change callback is fired with the new rating.
  • Hovering over a star fills that star and all stars to its left.
    • The stars that need to be filled during hover take priority over the existing filled state.
    • If the cursor leaves the widget and no new selection is made, the appropriate stars revert to the filled state before hovering.
  • Make the star rating widget reusable such that multiple instances can be rendered within the same page.

The star icons, both empty and filled, are provided as SVGs.

Asked at these companies

Premium featurePurchase premium to see companies which ask this question.
View plans

Loading editor