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
asked Nov 10 at 7:40
ribarcheto94
1118
add a comment |
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
asked Nov 10 at 7:40
ribarcheto94
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
add a comment |
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
asked Nov 10 at 7:40
ribarcheto94
1118
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
asked Nov 10 at 7:40
ribarcheto94
1118
asked Nov 10 at 7:40
ribarcheto94
1118
asked Nov 10 at 7:40
ribarcheto94
1118
asked Nov 10 at 7:40
ribarcheto94
1118
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
add a comment |
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
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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