What do you call a control that changes the relative sizes of two sections?

Question

I want to implement a control to change the relative size of two sections within a single entity. This would use an east-west resize cursor, and as the user dragged it would make one block smaller and the other larger. The parent entity needs to remain the same size.

If possible I would like to search around and see if anybody else has already implemented a javascript control that does this. However, I can't work out what to actually search for.

I have had a look at JQueryUI Resizables, Draggables and Sliders. None of them are quite a perfect fit.

Do you know what this pattern is called? Can you think of an implementation of this pattern in the wild (preferably web based)?

Answer 1

It's called a splitter (search for "splitter" on 43 Essential Controls for Web Apps).

It's not extremely common on the web, but it does exist in more than a few apps with a master-detail layout (e.g. Google reader). It is very common on the desktop though.