A couple of vertical ranges

Initialization

The tool is smart enough to realize that these ranges are vertical by inspecting their dimensions. The progress option enables the yellow progressbar which is styled with CSS. The max option specifies the maximum value which is being overridden by the individual ranges.

$(":range").rangeinput({ progress: true, max: 100 });

HTML coding

Here are the rangeinput elements. The shared configuration options are overridden with the HTML5 min, max, step and value attributes. See the rangeinput configuration for the descriptions and default values of these options.

<input type="range" max="10"  value="5" />
<input type="range" max="1"   step="0.1" value="0.2" />
<input type="range" max="100" step="5" />
<input type="range" min="400" max="1000" step="1" value="500" />

CSS coding

We use the same CSS file as in our previous horizontal range example, we just override some of its directives:

/* Override skin1.css to make it vertical */
 
/* height is now larger than width  */
.slider {
		height:300px;
		width:9px;
		margin:0 0 0 60px;
	}
 
	/* tweak drag handle position */
	.handle {
		top:0;
		left:-10px;
	}
 
	/* position progressbar on the bottom edge */
	.progress {
		width:9px;
		position:absolute;
		bottom:0;
	}