如何用Javascript突出显示活动滑块？

Question

我的页面上有两个滑块，范围在0到100之间。用户应该通过单击选择滑块的值，然后可能使用键盘的箭头键（为了精确）。 / p>

如何突出显示（=更改外观）活动滑块，以便用户明白他选择了哪些值？

Answer 1

使用:focus CSS伪选择器。浏览器之间可见的属性会有所不同。例如，Chrome不会显示background-color或border，但会显示outline。

＆＃13;

＆＃13;

input[type="range"]:focus {
  background-color: blue;
  border: 2px solid red;
  outline: 2px solid red;
}

＆＃13;

<input type="range" min="0" max="100" step="5">
<input type="range" min="0" max="100" step="5">

＆＃13;

＆＃13;

＆＃13;