Dual range slider without using jQuery

Question

I want to create a dual range UI slider without using jQuery, most of the dual range sliders have dependency of jQuery and I can't use jQuery in my project. I tried overlapping 2 range inputs but I am stucked at CSS and functionality. Is there any way to make non jQuery dual range slider? Ref- http://refreshless.com/nouislider/

Answer 1

There doesn't seem to be any JS range slider around that's not made using jQuery. I'd suggest to use noUiSlider , which at least doesn't depend on jQuery UI.

PS: jQuery UI with slider only: 24kb, noUiSlider: 10kb. And it even has more/better functionality imo.

Answer 2

You could give fdSlider a try. It does not depend on any other library.

Answer 3

Here is an only HTLM/CSS dual slider with custom styling:

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插件是最好的方法