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;}

http://topcss.org/demo/range/range.html

::-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