How to overlay 2 sliders and have them both active when creating a dual range slider using HTML5 and CSS?









up vote
-2
down vote

favorite












You will probably go blasting me for posting this and tell me there are millions of posts about this topic out on the internet already. As a beginner that has researched quite a bit, I still haven't found an answer to 2 questions when it comes to creating a dual slider.



1. How do you overlay 2 regular HTML5 sliders on top of each other?



2. How do you enable both slider-thumbs to be active, when one is "covering" the other?



I would appreciate it if you can highlight the changes that I need to make to my CSS to achieve these 2 things. I think they will be helpful to a lot of beginners out there, and in my opinion are must-know fundamental topics overlooked by the fancy sliders out there.



Here's my code so far:




#slide
 margin-top:20px;
 position:relative;


#slide2 
 position:absolute;
 top:26px;
 left:9px;


input[type=range] 

 -webkit-appearance: none; 
 background: transparent; 
 border:solid; 
 width:410px;
 height:15px;
 position:absolute
 border-radius:5px;
 outline: none; 


input[type=range]::-webkit-slider-thumb 
 -webkit-appearance: none;
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 opacity:1;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 



/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 


/* All the same stuff for IE */
input[type=range]::-ms-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

<div class="priceRangeInfo">
 <input type="range" id="slide" value="0" min="0" max="100" />
 <input type="range" id="slide2" value="100" min="0" max="100"/>

</div>





Thanks in advance






html css







share|improve this question





















  • Did you try this? stackoverflow.com/questions/4753946/…
    – sol
    Nov 10 at 8:01











  • Yes, I saw this but it's using the JQuery dual slider. I'm more interested in understanding what's going on under the hood rather than just using something that looks cool without understanding how it works. All those frameworks are great and all but I would rather go the vanilla way first and understand what these cool sliders are based on and how they are created even if my own slider doesn't look and function as well theirs.
    – ribarcheto94
    Nov 10 at 8:38














up vote
-2
down vote

favorite












You will probably go blasting me for posting this and tell me there are millions of posts about this topic out on the internet already. As a beginner that has researched quite a bit, I still haven't found an answer to 2 questions when it comes to creating a dual slider.



1. How do you overlay 2 regular HTML5 sliders on top of each other?



2. How do you enable both slider-thumbs to be active, when one is "covering" the other?



I would appreciate it if you can highlight the changes that I need to make to my CSS to achieve these 2 things. I think they will be helpful to a lot of beginners out there, and in my opinion are must-know fundamental topics overlooked by the fancy sliders out there.



Here's my code so far:




#slide
 margin-top:20px;
 position:relative;


#slide2 
 position:absolute;
 top:26px;
 left:9px;


input[type=range] 

 -webkit-appearance: none; 
 background: transparent; 
 border:solid; 
 width:410px;
 height:15px;
 position:absolute
 border-radius:5px;
 outline: none; 


input[type=range]::-webkit-slider-thumb 
 -webkit-appearance: none;
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 opacity:1;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 



/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 


/* All the same stuff for IE */
input[type=range]::-ms-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

<div class="priceRangeInfo">
 <input type="range" id="slide" value="0" min="0" max="100" />
 <input type="range" id="slide2" value="100" min="0" max="100"/>

</div>





Thanks in advance






html css







share|improve this question





















  • Did you try this? stackoverflow.com/questions/4753946/…
    – sol
    Nov 10 at 8:01











  • Yes, I saw this but it's using the JQuery dual slider. I'm more interested in understanding what's going on under the hood rather than just using something that looks cool without understanding how it works. All those frameworks are great and all but I would rather go the vanilla way first and understand what these cool sliders are based on and how they are created even if my own slider doesn't look and function as well theirs.
    – ribarcheto94
    Nov 10 at 8:38












up vote
-2
down vote

favorite









up vote
-2
down vote

favorite











You will probably go blasting me for posting this and tell me there are millions of posts about this topic out on the internet already. As a beginner that has researched quite a bit, I still haven't found an answer to 2 questions when it comes to creating a dual slider.



1. How do you overlay 2 regular HTML5 sliders on top of each other?



2. How do you enable both slider-thumbs to be active, when one is "covering" the other?



I would appreciate it if you can highlight the changes that I need to make to my CSS to achieve these 2 things. I think they will be helpful to a lot of beginners out there, and in my opinion are must-know fundamental topics overlooked by the fancy sliders out there.



Here's my code so far:




#slide
 margin-top:20px;
 position:relative;


#slide2 
 position:absolute;
 top:26px;
 left:9px;


input[type=range] 

 -webkit-appearance: none; 
 background: transparent; 
 border:solid; 
 width:410px;
 height:15px;
 position:absolute
 border-radius:5px;
 outline: none; 


input[type=range]::-webkit-slider-thumb 
 -webkit-appearance: none;
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 opacity:1;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 



/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 


/* All the same stuff for IE */
input[type=range]::-ms-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

<div class="priceRangeInfo">
 <input type="range" id="slide" value="0" min="0" max="100" />
 <input type="range" id="slide2" value="100" min="0" max="100"/>

</div>





Thanks in advance






html css







share|improve this question













You will probably go blasting me for posting this and tell me there are millions of posts about this topic out on the internet already. As a beginner that has researched quite a bit, I still haven't found an answer to 2 questions when it comes to creating a dual slider.



1. How do you overlay 2 regular HTML5 sliders on top of each other?



2. How do you enable both slider-thumbs to be active, when one is "covering" the other?



I would appreciate it if you can highlight the changes that I need to make to my CSS to achieve these 2 things. I think they will be helpful to a lot of beginners out there, and in my opinion are must-know fundamental topics overlooked by the fancy sliders out there.



Here's my code so far:




#slide
 margin-top:20px;
 position:relative;


#slide2 
 position:absolute;
 top:26px;
 left:9px;


input[type=range] 

 -webkit-appearance: none; 
 background: transparent; 
 border:solid; 
 width:410px;
 height:15px;
 position:absolute
 border-radius:5px;
 outline: none; 


input[type=range]::-webkit-slider-thumb 
 -webkit-appearance: none;
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 opacity:1;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 



/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 


/* All the same stuff for IE */
input[type=range]::-ms-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

<div class="priceRangeInfo">
 <input type="range" id="slide" value="0" min="0" max="100" />
 <input type="range" id="slide2" value="100" min="0" max="100"/>

</div>





Thanks in advance






#slide
 margin-top:20px;
 position:relative;


#slide2 
 position:absolute;
 top:26px;
 left:9px;


input[type=range] 

 -webkit-appearance: none; 
 background: transparent; 
 border:solid; 
 width:410px;
 height:15px;
 position:absolute
 border-radius:5px;
 outline: none; 


input[type=range]::-webkit-slider-thumb 
 -webkit-appearance: none;
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 opacity:1;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 



/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 


/* All the same stuff for IE */
input[type=range]::-ms-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

<div class="priceRangeInfo">
 <input type="range" id="slide" value="0" min="0" max="100" />
 <input type="range" id="slide2" value="100" min="0" max="100"/>

</div>





#slide
 margin-top:20px;
 position:relative;


#slide2 
 position:absolute;
 top:26px;
 left:9px;


input[type=range] 

 -webkit-appearance: none; 
 background: transparent; 
 border:solid; 
 width:410px;
 height:15px;
 position:absolute
 border-radius:5px;
 outline: none; 


input[type=range]::-webkit-slider-thumb 
 -webkit-appearance: none;
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 opacity:1;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
 



/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 


/* All the same stuff for IE */
input[type=range]::-ms-thumb 
 border: 1px solid #000000;
 height: 22px;
 width: 22px;
 border-radius: 100%;
 background: #2696D9;
 cursor: pointer;
 margin-top: -2px; 
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

<div class="priceRangeInfo">
 <input type="range" id="slide" value="0" min="0" max="100" />
 <input type="range" id="slide2" value="100" min="0" max="100"/>

</div>





html css




html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 7:40









ribarcheto94

1118




1118











  • Did you try this? stackoverflow.com/questions/4753946/…
    – sol
    Nov 10 at 8:01











  • Yes, I saw this but it's using the JQuery dual slider. I'm more interested in understanding what's going on under the hood rather than just using something that looks cool without understanding how it works. All those frameworks are great and all but I would rather go the vanilla way first and understand what these cool sliders are based on and how they are created even if my own slider doesn't look and function as well theirs.
    – ribarcheto94
    Nov 10 at 8:38
















  • Did you try this? stackoverflow.com/questions/4753946/…
    – sol
    Nov 10 at 8:01











  • Yes, I saw this but it's using the JQuery dual slider. I'm more interested in understanding what's going on under the hood rather than just using something that looks cool without understanding how it works. All those frameworks are great and all but I would rather go the vanilla way first and understand what these cool sliders are based on and how they are created even if my own slider doesn't look and function as well theirs.
    – ribarcheto94
    Nov 10 at 8:38















Did you try this? stackoverflow.com/questions/4753946/…
– sol
Nov 10 at 8:01





Did you try this? stackoverflow.com/questions/4753946/…
– sol
Nov 10 at 8:01













Yes, I saw this but it's using the JQuery dual slider. I'm more interested in understanding what's going on under the hood rather than just using something that looks cool without understanding how it works. All those frameworks are great and all but I would rather go the vanilla way first and understand what these cool sliders are based on and how they are created even if my own slider doesn't look and function as well theirs.
– ribarcheto94
Nov 10 at 8:38




Yes, I saw this but it's using the JQuery dual slider. I'm more interested in understanding what's going on under the hood rather than just using something that looks cool without understanding how it works. All those frameworks are great and all but I would rather go the vanilla way first and understand what these cool sliders are based on and how they are created even if my own slider doesn't look and function as well theirs.
– ribarcheto94
Nov 10 at 8:38

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236972%2fhow-to-overlay-2-sliders-and-have-them-both-active-when-creating-a-dual-range-sl%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236972%2fhow-to-overlay-2-sliders-and-have-them-both-active-when-creating-a-dual-range-sl%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

Image
0 I have a "Ask for demo" form which has two options, 1. Contact me now and 2. Schedule a demo. If user selects option 1 then current date and time should by displayed on form and if he selects option 2 then A calendar is shown for taking user input. My problem is getting current date and time by default on form. Please help. TIA contact-form-7 share | improve this question asked Nov 12 '18 at 9:01 abhi25 abhi25 14 5 add a comment  |  0 I have a "Ask for demo" form which has two options, 1. Contact me now and 2. Schedule a demo. If user selects option 1 then current date and time should by displayed on form and if he selects option 2 then A calendar is shown for taking user input. My problem is getting current date and time by default on form. Please help. TIA contact-form-7 share | improve this question asked Nov 12 '18 at 9:01 abhi25 abhi25 14 5 add a commen
Read more

Syphilis

Image
Klassifikation nach ICD-10 A50 Syphilis connata A51 Frühsyphilis A52 Spätsyphilis A53 Sonstige und nicht näher bezeichnete Syphilis ICD-10 online (WHO-Version 2019) Syphilis , [1] auch Lues (venerea) , harter Schanker oder Franzosenkrankheit (maladie française) genannt, ist eine chronische Infektionskrankheit, die zur Gruppe der sexuell übertragbaren Erkrankungen gehört. Der Erreger der Syphilis ist das Bakterium Treponema pallidum ssp. pallidum . Die Syphilis wird hauptsächlich bei sexuellen Handlungen durch Schleimhautkontakt und ausschließlich von Mensch zu Mensch übertragen. Während der Schwangerschaft und bei der Geburt kann eine erkrankte Mutter ihr Kind infizieren ( Syphilis connata ). Das Erscheinungsbild der Krankheit ist vielfältig. Typisch ist ein Beginn mit schmerzlosen Schleimhautgeschwüren und Lymphknotenschwellungen. Bei einem Teil der Infizierten kommt es zu einem chronischen Verlauf, der durch vielfältigen Haut- und Organbefall gekennzeichnet ist. Im Endstadium kom
Read more

Darth Vader #20

Image
Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Community Top Users Activity Feed User Lists Community Promos Archives News Reviews Videos Podcasts Previews Login / Sign Up All Wiki     Arcs     Characters     Companies     Concepts     Issues     Locations     Movies     People     Teams     Things     Volumes     Series     Episodes Editorial     Videos     Articles     Reviews     Features Community     Users Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Com
Read more