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?

1 Answer 1


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

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.