vertical range

[rubenarslan]

trafficstars

Is it possible to make ranges vertical? I found this which makes the native ranges vertical, but webshim does not seem to pick up on the height being greater than the width or any of the other cues.

[aFarkas]

You can try this:

.ws-range,
 input[type="range"] {
    width: 0.61538em;
    height: 199px;
}

But this CSS should be in sync with this js config:

webshim.setOptions('forms-ext', {
    replaceUI: true
});

Demo http://jsfiddle.net/trixta/2v1vmgyx/

[rubenarslan]

Thank you! I added

.ws-range
 .ws-range-thumb {
     margin-left:-4.5px !important;
}

so that the thumb would not be right-shifted at load. It does return to the correct position once you drag it, but it starts at margin-left:-11px. Will this have unforeseen side effects? http://jsfiddle.net/f6rt1nzw/1/

[aFarkas]

No, but the idea of the inline margin-left/margin-top is that it always tries to center the thumg inside the range. In case you don't want to center it, you can/should use top/left instead:

 .ws-range-thumb {
     left: 8px;
}

Demo: http://jsfiddle.net/trixta/f6rt1nzw/2/

[rubenarslan]

Hm, I think there's a misunderstanding. In my tests, the thumb is not at the center of the range, but more to the left of it. Once you drag it, this is corrected, it jumps to the middle. But the default is a little off.