Add rating appearance for range

[lognaturel]

Description

https://docs.getodk.org/form-question-types/#range-widget-with-rating

---

Checklist

• Does it need UI/UX design?
  • Yes. Describe the UI/UX requirements or attach a Figma link in the "Design" section.
  • No
• Does it need API design?
  • Yes. Specify the endpoints, methods, or data structures needed.
  • No
• Does it need design around state flow?
  • Yes. Outline the state flow requirements.
  • No
• Does it need a test plan?
  • Yes. Add the test plan as a comment in this task or attach the document.
  • No

---

User Stories

• As a [user type],
  I want [functionality],
  so that [benefit].

---

Design

Per @aly at #271 (comment), leverage https://primevue.org/rating/

• Figma: [Insert URL]
• Design Docs: [Insert URL]

---

Dependencies

---

Additional Notes

---

Related Issues

[garethbowen]

The default styling for the primevue rating component is terribly small so I've chosen to double it to make it fit thematically with the other widgets, but also have a larger click target. I also considered adding a little padding in between stars but I think it's ok now. @alyblenkin Does this look alright to you?

[alyblenkin]

Yes, completely agree. It's surprising because they have pretty good standards for accessibility. Adding a little extra padding would be helpful for mobile users!

[garethbowen]

Ok. I've added just enough of a gap that you can still fit 10 stars on a small mobile screen.

[alyblenkin]

Thank you!