For a web application I'm creating, users will be able to generate square-shaped images of sizes within some range (say from
50 x 50px to
500 x 500px).
Since the resulting image will always be a square, I basically only need one input field (perhaps a number field, or a slider), to signify the length of one (or any, for that matter) side of the resulting image.
How would you, most succinctly, yet effectively, show that the number the user enters represents the length of one side and that it will always result in a square-shaped image?
I was thinking maybe something like this example jsfiddle. Perhaps you can think of something even more concise, but with the ability for a little more precision, as well.
I could add an input field, for instance, or make the numeric values editable, as well. I'm just curious if you have anything to add to this, or something completely different, altogether.