I'm working on a ux-proof of concept of an interface for splitting a payment into several fractions. I use sliders and input fields to set these fractions, but the sum of them obviously should remain equal to the initial payment. Here is the prototype I started to assemble: http://share.framerjs.com/6knlu8r5d28l/
I ran into several difficulties already though and wonder if someone could help me figure it out. Would really apreciate any help!
1) I found the JS implementation of the exact logic I need for the sliders https://jsfiddle.net/anoor/8fs0Lq4a/1/ but failed to implement it in my prototype
2) I use sliders[i].knob.on Events.DragMove instead of sliders[i].on "change:value" to move all the sliders except current one, but the problem with this is that it stops working when I move the finger too fast and it goes off the knob
3) I'm also wondering if there's a simple way to trigger anything when user edits one of the input fields. I'm using Andreas Wahlström's text module for the inputs.
4) I tried to access tabular figures but can't make it work as well
Here is the css, but it's not working: