User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

enter image description here

enter image description here

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)?

share|improve this question
up vote 2 down vote accepted

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.

share|improve this answer
Fantastic Thanks! A quick google has found me a few potential jquery implementations. – Alex Apr 10 '12 at 4:19

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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