<!DOCTYPE html>
<title>Deprecated CSS appearance value: slider-vertical</title>
<link rel=author href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching">
<style>
p {
font-weight: bold;
}
.ltr { direction: ltr }
.rtl { direction: rtl }
.s-v { appearance: slider-vertical }
.htb { writing-mode: horizontal-tb }
.side { writing-mode: sideways-lr }
.srl { writing-mode: sideways-rl }
.vlr { writing-mode: vertical-lr }
.vrl { writing-mode: vertical-rl }
</style>
<p>Horizontal</p>
ltr:<input type="range" value="30" min="0" max="100" class="ltr htb" list=foo>
ltr,s-v:<input type="range" value="30" min="0" max="100" class="ltr s-v htb" list=foo>
rtl:<input type="range" value="30" min="0" max="100" class="rtl htb" list=foo>
rtl,s-v:<input type="range" value="30" min="0" max="100" class="rtl s-v htb" list=foo>
<p>Sideway</p>
s-lr,ltr:<input type="range" value="30" min="0" max="100" class="ltr side" list=foo>
s-lr,ltr,s-v:<input type="range" value="30" min="0" max="100" class="ltr s-v side" list=foo>
s-lr,rtl:<input type="range" value="30" min="0" max="100" class="rtl side" list=foo>
s-lr,rtl,s-v:<input type="range" value="30" min="0" max="100" class="rtl s-v side" list=foo>
s-rl,ltr:<input type="range" value="30" min="0" max="100" class="ltr srl" list=foo>
s-rl,ltr,s-v:<input type="range" value="30" min="0" max="100" class="ltr s-v srl" list=foo>
s-rl,rtl:<input type="range" value="30" min="0" max="100" class="rtl srl" list=foo>
s-rl,rtl,s-v:<input type="range" value="30" min="0" max="100" class="rtl s-v srl" list=foo>
<p>Vertical</p>
v-lr,ltr:<input type="range" value="30" min="0" max="100" class="ltr vlr" list=foo>
v-lr,ltr,s-v:<input type="range" value="30" min="0" max="100" class="ltr s-v vlr" list=foo>
v-lr,rtl:<input type="range" value="30" min="0" max="100" class="rtl vlr" list=foo>
v-lr,rtl,s-v:<input type="range" value="30" min="0" max="100" class="rtl s-v vlr" list=foo>
v-rl,ltr:<input type="range" value="30" min="0" max="100" class="ltr vrl" list=foo>
v-rl,ltr,s-v:<input type="range" value="30" min="0" max="100" class="ltr s-v vrl" list=foo>
v-rl,rtl:<input type="range" value="30" min="0" max="100" class="rtl vrl" list=foo>
v-rl,rtl,s-v:<input type="range" value="30" min="0" max="100" class="rtl s-v vrl" list=foo>
<datalist id=foo>
<option>0</option>
<option>10</option>
<option>20</option>
<option>40</option>
<option>100</option>
</datalist>
Codebase Browser
chromium