输入范围 HTML5 无法获取值

Question

也许标题不是最好的，但我完全不知道该怎么问。

我正在开发一些东西，我需要一个非常简单的HTML范围滑块。

我可以完美自定义它，因此这不是问题，但是在测试很多后……看起来像： - 手机和平板电脑的运作良好(仅根据Chrome开发人员工具进行测试( - 桌面(因此，使用鼠标(有问题。

问题：大多数时间...它被漏洞了。单击它并移动光标后，然后再次单击以修复我的选择...它不会停止专注，因此光标仍会移动...因此，这意味着我无法选择一个值。所以，性交和刷新。

，这个滑块处于巨大形式的末端，因此，如果某人必须刷新，则创建全部...太糟糕了。

小提琴：https：//jsfiddle.net/96es9zrt/

这是我的布局：

<input type="range" step="10" min="10" max="50" value="50">

除了自定义CSS之外，它没有样式。顺便说一句，我不知道为什么...在光标移动时，线路消失了。我不会发生在我身上

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 10px 0;
}
input[type=range]:focus {
    outline: 0;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: rgba(204, 204, 204, 0.78);
    border-radius: 0px;
    border: 1px solid #cccccc;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #46e5d2;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: rgba(214, 214, 214, 0.78);
    outline: 0;
    border: none;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: rgba(204, 204, 204, 0.78);
    border-radius: 0px;
    border: 1px solid #cccccc;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #46e5d2;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: rgba(194, 194, 194, 0.78);
    border: 1px solid #cccccc;
    border-radius: 0px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
    background: rgba(204, 204, 204, 0.78);
    border: 1px solid #cccccc;
    border-radius: 0px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #46e5d2;
    cursor: pointer;
    height: 0px;
}
input[type=range]:focus::-ms-fill-lower {
    background: rgba(204, 204, 204, 0.78);
    outline: 0;
}
input[type=range]:focus::-ms-fill-upper {
    background: rgba(214, 214, 214, 0.78);
    outline: 0;
}

Answer 1

注意！您将滑块的高度设置为0px！它使得当您使用它时，栏将消失！只需将其设置为其他东西

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0px;  //change this!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: rgba(204, 204, 204, 0.78);
    border-radius: 0px;
    border: 1px solid #cccccc;
}

您可以在这里看到，现在它可以正常工作https://jsfiddle.net/96es9zrt/1/