Include Interactive UI (Slider/Input box) for changing rating in Code Sandbox Demo

[shubhamwaghe]

Motivation: Code Sandbox demo for testing stars could be made more fun by having a 0-5 slider below the stars or an input field to dynamically change the rating and test the rating stars. This could very well highlight the dynamic nature of the plugin which this plugin excels at.

Work: Addition of input slider/ input box to take interactive input from user and binding the value to star ratings

This could make the demo more polished thereby making the plugin more appealing for adoption by developers

[JonathanDn]

Assuming I will build a mechanisem that allows you to pass a single boolean property - "isInteractive" to the star rating comp and once passed true:

• The comp will support a hover effect that will "fill" the star according to how far the cursor is between the most left(0) to the most right (5)
• The comp will also show the number to its right 3.5 4.5 4.9 etc
• The comp will also expose a click event to set the new rating via a click on the star fullness range.

Would this solution be more effective to your needs? (It could of course be updated in the demo as well and allow similar functionality) what are your thoughts?

[shubhamwaghe]

Yes, this sounds good! But this will be more work if component itself will include this feature.

[JonathanDn]

@shubhamwaghe Yea, I guess I will divide it to 2 feature requests:

1. Rating Indication - right to the svg's
2. Ineteractive Setting of Rating - which requires building more logic