I want to create an app on Vue where I update through a slider a value and the other value get's updated. Something like this:

Can someone give me a helping hand? I'm going insane. I've been trying to get the formula right for the past 3 days.

This is what I've written so far:

updateRarities(trait, raritySlider){
            var property = this.currentCollection.properties.items.find(property => property.id === trait.propertyID);
            var numOfTraits = property.traits.items.length;
            let newRarityCurrentTrait = 1 / numOfTraits * Number(raritySlider);
            
            for (let i = 0; i < property.traits.items.length; i++) {
                if (property.traits.items[i].id !== trait.id) {
                    let updatedTrait = {
                        id: property.traits.items[i].id,
                        // calculate the rarity of the other traits 
                        rarity: (1 - newRarityCurrentTrait) * property.traits.items[i].raritySlider,
                        updatedAt: new Date(),
                    }
                    API.graphql(graphqlOperation(mutations.updateTrait, { input: updatedTrait}));
                }
                else {
                    let updatedTrait = {
                        id: trait.id,
                        rarity: newRarityCurrentTrait,
                        raritySlider: raritySlider,
                        updatedAt: new Date(),
                    }
                    API.graphql(graphqlOperation(mutations.updateTrait, { input: updatedTrait}));
                }
            }
        }