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

Use pre created SQLite database for Android project in kotlin

Image
0 I am trying to use an already existing sqLite database in my android app. I have verified that it is loaded into the project in the assets folder and I can browse it in DB browser when I open it directly from the project. This is the schema for the table I am trying to query CREATE TABLE "ACTIVITY_LIST_TBL" ( `_ID` INTEGER NOT NULL, `ACT_NAME` VARCHAR NOT NULL, `ACT_CODE` VARCHAR, `IS_ACTIVE` INTEGER DEFAULT -1, PRIMARY KEY(`_ID`) ) Below is the activity that creates the sqlite helper and then on a button click I execute a query on the ACTIVITY_LIST_TBL. When the query is executed this exception is thrown: android.database.sqlite.SQLiteException: no such table: ACTIVITY_LIST_TBL (code 1 SQLITE_ERROR): , while compiling: SELECT * FROM ACTIVITY_LIST_TBL class CalendarActivity : AppCompatActivity() { private var cursor:Cursor? = null override fun onCreate(savedInstanceState:Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.calendar_activity
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

Ondo

Image
Der Titel dieses Artikels ist mehrdeutig. Zu weiteren Bedeutungen siehe Ondo (Begriffsklärung). Ondo Basisdaten Hauptstadt: Akure gegründet: 3. Februar 1976 Gouverneur: Rotimi Akeredolu ISO 3166-2: NG-ON Fläche Fläche: 15.500 km² Rang in Nigeria: 25 Bevölkerung Einwohner: 4.671.700 (2016) Bevölkerungsdichte: 320 Einw./km² (2016) Rang in Nigeria: 18 Lage von Ondo in Nigeria Ondo ist ein Bundesstaat des westafrikanischen Landes Nigeria mit der Hauptstadt Akure, die mit 420.623 Einwohnern (2005) auch die größte Stadt des Bundesstaates ist. Inhaltsverzeichnis 1 Geografie 2 Geschichte 2.1 Liste der Gouverneure und Administratoren 3 Verwaltung 4 Wirtschaft Geografie | Der Bundesstaat liegt im Südwesten des Landes und grenzt im Norden an den Bundesstaat Ekiti, im Nordwesten an den Bundesstaat Osun, im Nordosten an den Bundesstaat Kogi, im Süden an den Atlantik, im Südosten an den Bundesstaat Delta, im Westen an den Bundesstaat Ogun und im Osten an den Bundesstaat Edo. Geschichte | Der
Read more