fun with range slider
TRANSCRIPT
Fun with Range Slider
wenju li
优先使用原生标记,通过 CSS 调整样式,不支持的浏览器再模拟,模拟组件与原生控件交互一致,并保证可访问性。
实现策略
input type=range imprecise number-input
control
input type=numberprecise number-input control
Chrome Firefox IE10+
<input type="range" min="0" max="100" value="30" step="10">
thumb
track
progress
ticks
<input type="range" min="0" max="100" value="50" step="10" list="settings"><datalist id="settings"> <option>0</option> <option>10</option> <option>20</option> <option>30</option> <option>40</option> <option>50</option> <option>60</option> <option>70</option> <option>80</option> <option>90</option> <option>100</option></datalist>
<input type="range" min="0" max="100" value="50" step="10" list="settings" class="slider-vertical" orient="vertical"><datalist id="settings"> <option>0</option> <option>10</option> <option>20</option> <option>30</option> <option>40</option> <option>50</option> <option>60</option> <option>70</option> <option>80</option> <option>90</option> <option>100</option></datalist>
input[type=range].slider-vertical{ -webkit-appearance:slider-vertical; /* for IE */ writing-mode:bt-lr;}
::-webkit-slider-thumb
::-webkit-slider-runnable-track
no progress::-webkit-slider-runnable-track:after 模拟
no ticks
::-moz-range-thumb
::-moz-range-track
::-moz-range-progress
no ticks
::-ms-thumb
::-ms-track
::-ms-fill-lower
no ticks
::-ms-fill-upper
::-ms-tooltips
50
<div class="range-slider"> <div class="range-ui"> <!-- 原生 range --> <input type="range" min="0" max="100" step="10" value="70"> <!-- 模拟 range: 轨道、滑块、进度条 --> <div class="range-track”> <div class="range-thumb"><b class="range-handler"></b></div> <div class="range-progress"></div> </div> <!-- 刻度 --> <div class="range-ticks">…</div> </div> <!-- 当前值 / 输入值 --> <div class="range-number"> <input type="text" class="range-editor" value="70"> <span class="range-number-unit">GB</span> </div></div>
/********** IE8 9 模拟 **********/.range-track{ display:none;}
/* IE*/.range-slider input[type=range]{ display:none\9;}.range-slider .range-track{ display:inline-block\9;}
/*≥ IE10 */_:-ms-input-placeholder, :root .range-slider input[type=range] { display:block;}_:-ms-input-placeholder, :root .range-slider .range-track{ display:none;}
.range-thumb{ position:relative; margin:0 8px 0 9px;}
.range-thumb .range-handler{ position:absolute; top:0; left:50%; height: 27px; width: 17px; margin-left:-9px;}
要求:• 刻度数量未知,宽度均分;• 宽度未知的刻度数字要与
刻度线水平居中对齐。<div class="range-ticks"> <ul class="range-ticks-li"> <li> ::before <b>0</b> </li> <li>...</li> </ul></div>
方案:• 均分: display:table-cell ,首个单元格宽度为 0• 居中:
1. <b> 设 transform:translateX(50%) IE8 不支持
2. 文字居右, <b> 内前面插入宽度为 50% 的伪元素
3. <b> 与父级等宽,文字居中显式, <b> 设left:50%b:before{ content:''; display:inline-block; width:50%;}
b{ position:absolute; left:50%; width:100%; text-align:center;}
Accessibility
<div class=“range-track” tabindex=“0” role=“slider” aria-
valuemin=“0” aria-valuemax=“100” aria-valuenow=“70”>
<div class=“range-thumb”><b
class=“range-handler”></b></div>
<div class=“range-progress”></div>
</div>
Thanks