HTML 5 - how to add a spin box that holds range values

I want to add GPA range in the spinbox, just like the image below.

I want for the user to choose their GPA from the spinbox