Range Slider Form Input: Memberstack User Attribute Display and Update in Webflow Form

When building a user dashboard, I needed a user to be able to see their current profile attribute value, use a range slider in a form to choose a new value, and click an update (form submit) button to save the new value to their profile attribute.

I’m still learning javascript and was able to piece some pieces of code together to get it to work after quite a bit of effort.

It will probably be live and working on the flightsquad.com/dashboard page, but I made a quick demo here too:

Hey Chris :wave:

Thank you for joining and posting in the forum!!! :tada:

To update a member’s profile you would need to use the front end api. This would take custom javascript to implement. When you get everything ready in webflow let me know and I could help with the js part. :smiley:

Hey Josh!

So I tried using the Memberstack front end api, but as you can see in the code here (https://codepen.io/LallyChris/pen/GRpyGed) I am using the slider as a custom form input. The member’s profile is updated when the form “Update” button is clicked.

Using the front end api, are you saying it would be possible for the member’s profile attribute to be updated when the slider value is changed (using “on-change”?) without the need to click “Update”? If so, that would be pretty awesome!

I think you could do an onChange event. You would have to set a timeout on it to not max the front end api which is 5 request per second. :smiley: