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.
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.
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.
We use the same CSS file as in our previous horizontal range example, we just override some of its directives: