I’m trying to make a form similar to that in the computer game “The SIMS” where a user has some options and can score themself against each one - for example, the options would be as below with the user able to set (preferably on a slider) their score out of 10 for each element.
- Patient | 1 to 10
- Kind | 1 to 10
- Likeable | 1 to 10
- Intelligent | 1 to 10
But then only have 20 points to be able to make the choices so they can’t be perfect at everything.
I’ve created a hidden text input for
- Total points
- Spent points
- Remaining Points
And built a condition on the sliders that disables them and changes the max value when the remaining points hits zero. The problem is that neither of these things solves the problem.
- Deactivating the slider means the user can’t then reduce that choice should they need to; it also fails to deactivate when all the points have been spent as the deactivation does not remove the users focus on the control
- Changing the max value just means that if one point is available, the slider would display this point in the previous position 10, confusing the user
I need either a maximum selectable value (different from max possible value) property to limit in the slider, and for that property to recalculate after every change on any slider linked to the number of points…
Unless - any of you clever people have a better way??