Question

我想在不使用jQuery的情况下创建双范围UI滑块，大多数双范围滑块都依赖于jQuery，我不能在我的项目中使用jQuery。我尝试重叠2个范围输入，但我坚持使用CSS和功能。有没有办法制作非jQuery双量程滑块？ REF- http://refreshless.com/nouislider/

Answer 1

似乎没有任何JS范围滑块不是使用jQuery制作的。我建议使用noUiSlider，至少不依赖于jQuery UI。

PS：仅带滑块的jQuery UI：24kb，noUiSlider：10kb。它甚至还有更多/更好的功能。

Answer 2

您可以尝试fdSlider。它不依赖于任何其他库。

Answer 3

这是唯一具有自定义样式的HTLM / CSS双滑块：

CSS：

                .slider {
                    -webkit-appearance: none;
                    width: 90%;
                    height: 25px;
                    position: absolute;
                    background: #a4a4a4;
                    outline: none;
                }

                .slider input {
                    pointer-events: none;
                    position: absolute;
                    overflow: hidden;
                    left: 25%;
                    top: 15px;
                    width: 50%;
                    outline: none;
                    height: 18px;
                    margin: 0;
                    padding: 0;

                }

                .slider::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    appearance: none;
                    width: 35px;
                    height: 35px;
                    background: #ea4550;
                    cursor: pointer;

                    pointer-events: all;
                    position: relative;
                    z-index: 1;
                    outline: 0;
                }

                .slider::-moz-range-thumb {
                    width: 20px;
                    height: 20px;
                    background: #ea4550;
                    cursor: pointer;

                    pointer-events: all;
                    position: relative;
                    z-index: 10;
                    -moz-appearance: none;
                    width: 9px;
                }

                .slider input::-moz-range-track {
                    position: relative;
                    z-index: -1;
                    border: 0;
                }
                .slider input:last-of-type::-moz-range-track {
                    -moz-appearance: none;
                    background: none transparent;
                    border: 0;

                }
                .slider input[type=range]::-moz-focus-outer {
                border: 0;
                }

HTML：

<input type="range" min="12" max="2175" value="12" class="slider" id="lower">
<input type="range" min="12" max="2175" value="2175" class="slider" id="higher">

Answer 4

您可以编写自己的自定义双滑块（html，css和javascript），但我确信使用jquery插件是最好的方法

不使用jQuery的双量程滑块

4 个答案: