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.
resizeable-slider.html
resizeable-slider.html
The HTML code:
The html code sets up three divs on the page, as in the previous example. The CSS controls the initial positions of these divs, but this is immediately changed by the onload call to the Javascript setcolumnwidth().
The significant aspects of this HTML code are highlighted in yellow in the code example below.
onload starts by calling setcolumnwidth(). This checks localStorage to see if values have been stored for framewidth and topheight . If these are available these will be used, but if these are null, alternative values will be used: 40 and 30.
If a slider is moved then the onchange event is called. The horizontal slider, slider2 calls updatecolumnwidth(this.value) , passing the value of the slider to that function. The function recieves this value as val and first stores this in localStorage, line 2, , and then applies this to div1 ,line 3.The corresponding value needed to be applied to div2 is then calculated and applied on line 4.
function updatecolumnwidth(val) {
localStorage.setItem("framewidth", val);
document.getElementById("div1").style.width = val + "%";
document.getElementById("div2").style.width = 100 - val + "%";
}
function setcolumnwidth() {
var val = localStorage.getItem("framewidth") || "40";
var valtop = localStorage.getItem("topheight") || "30";
document.getElementById("div1").style.width = val + "%";
document.getElementById("div2").style.width = 100 - val + "%";
document.getElementById("topmenu").style.height = val + "%";
}
The CSS:
The range slider can be quite difficult to style with so many non-standard options. An online code generator can be very useful here. The vertical scale uses a range input inside the class vscale. This is rotated 90 degrees. As its height is the full height of the browser window, rotating it in place would place this in the middle of the screen. A margin of -50% of the screen moves this to the edge of the screen.
The CSS values for just input[type=range]: are applied to both the vertical and horizontal range inputs.
.scale { and .scale input[type=range] { apply only to the horizontal range input in this example.
.vscale { and .vscale input[type=range] { apply only to the vertical range input in this example.
