Resizeable using input sliders

Range inputs are ideal for creating inputs that allow the user to set the width or height of elements on the screen. They can be very intuitive to use, but not quite so easy to program!

The following example illustrates a vertical slider as well as a horizontal slider.

Dragging the slider calls a Javascript function that updates the width or height of the div elements that it controls.

This Javascript also stores the selected value in localStorage. Next time the user visits this site the values in localStorage are retrieved and used to set the initial values used for these element widths.

Working demonstration using Range Inputs:

Drag the buttons on the green slider and release to observer the change is size of the div that it controls.