A couple of vertical ranges
Rangeinput demo 2 / 4 : A couple of vertical ranges
These ranges are initialized with a single $(":range").rangeinput() call and they share a common configuration. Each input overrides the common configuration with their own attributes.
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;
}