Dual range slider without using jQuery

4
votes

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/

4
javascriptjquerycss
What is the reason you cannot use JQuery? I do not understand if javascript is allowed but JQuery isn't. JQuery is javascript... - Secret Squirrel
My application is size-sensitive. I don't want to add any extra libraries. - nickalchemist
@Nickalchemist Whilst that's true, but you can make it only include the Slider UI and nothing else. - MackieeE
@MackieeE So there is no way I can make a dual slider without using jQuery. Anyone modified non-UI slider library and converted it to native Javascript? - nickalchemist
@Nickalchemist Of course you can, just if you did developed one bespokely with Vanilla Js, it would probably/likely entail the same line of implementation as jQuery UI Slider in the end. - MackieeE

4 Answers

5
votes

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.

4
votes

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

1
votes

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">
-1
votes

You can code your own custom dual slider (html, css and the javascript) but I'm sure that using a jquery plugin is the best approach