Select and adjust individual and multiple (four) input fields both numeric and with slider

Question

I am working on a new solution for a graphical tool and need to find alternative versions how a user can adjust fx margin or padding. In this case there are four input fields where the user currently can: 1. Adjust the individual margin by entering a number or using a slider 2. Selec all four fields and then adjusting all four values with a slider.

The current solution needs to optimized and if possible more effient and increase usability. Any input on how to solve this or have you seen some good examples?

Answer 1

Google Developer tools currently does it like this (seen on the far right of the image):

Showing a visual representation of the margin and padding structure helps the user get a clear understanding of which element they are editing. You can jump right in and edit the values on the fly.

For such a precise control I would recommend against sliders.