CODEWITHSUNDEEP
javascriptjquerycss
nickalchemist
nickalchemist

Reputation: 2241

Dual range slider without using jQuery

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/

Upvotes: 4

Views: 11447

Answers (4)

Jan Mertlík
Jan Mertlík

Reputation: 21

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

Upvotes: 2

user769096
user769096

Reputation:

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

Upvotes: 4

Seimen
Seimen

Reputation: 7250

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.

Upvotes: 6

andrei
andrei

Reputation: 2940

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

Upvotes: -1

Related Questions