How to animate another element on hover of an element? - javascript

I have a HTML 5 range element. What I need to do is when the user hover over the range, the height and width of the thumb should increase to 12 pixels.
CSS
.myrange::-webkit-slider-thumb{
position:relative;
top:-5px;
appearance:none;
-webkit-appearance:none;
-webkit-transition: width 2s, height 4s;
transition: width 2s, height 4s;
border-radius:50px;
background-color:rgb(9,90,0);
border:0;
cursor:pointer;
visibility:hidden;
}
JavaScript
var skb_rhdaseek = $("<style>", {"type": "text/css"}).appendTo("head");
$('.myrange').hover(function(){
skb_rhdaseek.text('.myrange::-webkit-slider-thumb{height:12px; width:12px;}');
});

You have to add -webkit-appearance: none to your whole range element as well so that its thumb would get styled. And finally you don't need jquery to do that.
.myrange {
-webkit-appearance: none;
height:10px;
width:200px;
background-color:#e3f2fd;
}
.myrange::-webkit-slider-thumb {
height: 10px;
width: 10px;
background: #33aaff;
cursor: pointer;
-webkit-appearance: none;
transition: height .2s ease-in-out;
}
input[type=range]:hover::-webkit-slider-thumb {
height: 30px;
}
<input type="range" class="myrange" value="50">

This should help you out!
$('input').mouseenter(function() {
$('input').toggleClass('over');
});
$('input').mouseleave(function() {
$('input').toggleClass('over');
})
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range].over::-webkit-slider-thumb {
height: 12px;
width: 12px;
}
/* All the same stuff for Firefox */
input[type=range].over::-moz-range-thumb {
height: 12px;
width: 12px;
}
/* All the same stuff for IE */
input[type=range].over::-ms-thumb {
height: 12px;
width: 12px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #3071a9;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #3071a9;
}
input[type=range].over::-webkit-slider-runnable-track {
height: 6px;
}
input[type=range].over::-moz-range-track {
height: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='range'>

Related

How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?

I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>

range slider thumb css issue in IE and Edge

I am creating a range slider for my site which needs to look same on all browser. I am having an issue with slider thumb size in IE and Edge now. I am unable to increase the height of thumb more than the slider track
Chrome and Firefox:
IE and Edge:
Code:
<input type="range" min="1" max="100" step="1" value="15">
CSS:
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
outline:none !important;
border-radius: 6px;
height: 8px;
width:100%;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor:pointer;
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius:50%;
transition:100ms;
}
input[type='range']:hover::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor:pointer;
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius:50%;
}
/*Firefox */
input[type="range"]::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius:50%;
cursor:pointer;
}
input[type="range"]:hover::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius:50%;
cursor:pointer;
}
input[type=range]::-moz-range-track {
background:none;
}
/*IE and Edge */
input[type=range]::-ms-thumb{
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius:50%;
cursor: hand;
}
input[type=range]::-ms-fill-upper {
background-color: #C5C5C5;
}
input[type=range]::-ms-fill-lower {
background-color: orange;
}
input[type=range]::-ms-track {
border:none;
color:transparent;
height:8px;
}
input[type="range"]::-ms-tooltip {
display: none; /*tooltip makes thumb sliding lagy*/
}
Jquery:
$('input[type="range"]').on('input change',function(){
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', orange), '
+ 'color-stop(' + val + ', #C5C5C5)'
+ ')'
);
});
After going through the link http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html found that IE won't let the thumb overflow the track. But there is a workaround mentioned in it.
I am able to make that change after adjusting the input[type="range"] height. But that changing the format in chrome and firefox.
Is there anyway to to resolve it.
Fiddle:
https://jsfiddle.net/anoopcr/ssbx0anj/55/
The code below shows a cross-browser slider that is working on Edge as well:
.wrap {
float: left;
position: relative;
margin: 0 0.5em 0.5em;
padding: 0.5em;
height: 12.5em;
width: 1.5em;
}
[type='range'] {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
width: 12.5em;
height: 1.5em;
transform: translate(-50%, -50%) rotate(-90deg);
background: transparent;
font: 1em arial, sans-serif;
}
[type='range'], [type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
[type='range']::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.25em;
background: #ccc;
}
[type='range']::-moz-range-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.25em;
background: #ccc;
}
[type='range']::-ms-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.25em;
background: #ccc;
}
[type='range']::-webkit-slider-thumb {
margin-top: -0.625em;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #f90;
}
[type='range']::-moz-range-thumb {
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #f90;
}
[type='range']::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #f90;
}
<div class='wrap'>
<input type='range' value="5" min="0" max="10"/>
</div>
Credits goes to Ana Tudor for the Original code pen:
[Codepen](https://codepen.io/thebabydino/pen/WdeYMd)

Input range with increased clickable area

I am trying to code an input range with narrow tracker and small thumb, but with wider clickable area than tracker.
<div class="slider-wrapper">
<input type="range" orient="vertical" class="volume-slider"/>
</div>
For example, I have a div.slider-wrapper wrapper for input range and when I click inside the wrapper, input value would change.
jsfiddle
I checked rangeslider.js and jquery ui slider, but didn't find solution for this.
.slider-wrapper{
background: rgba(0, 0, 0, 0.8);
width: 40px;
height: 100px;
position: relative;
left: 1px;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
/*border: 1px solid white;*/
/*required for proper track sizing in FF*/
width: 80px;
transform: rotate(270deg);
position: relative;
left: -22px;
top: 37px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 80px;
height: 2px;
background: #61b4f7;
border: none;
/*border-radius: 2px;*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range]::-moz-range-track {
width: 80px;
height: 2px;
background: #61b4f7;
border: none;
/* border-radius: 3px; */
}
input[type=range]::-moz-range-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 80px;
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #61b4f7;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<div class="slider-wrapper">
<input type="range" orient="vertical" class="volume-slider"/>
</div>
Adding padding to the range element will increase the clickable space. You can then put a transparent background on the element:
.slider-wrapper{
background: rgba(0, 0, 0, 0.8);
width: 40px;
height: 100px;
position: relative;
left: 1px;
}
input[type=range] {
padding: 19px 10px;
background-color: transparent;
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
/*border: 1px solid white;*/
/*required for proper track sizing in FF*/
width: 80px;
transform: rotate(270deg);
position: relative;
left: -32px;
top: 28px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 80px;
height: 2px;
background: #61b4f7;
border: none;
/*border-radius: 2px;*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range]::-moz-range-track {
width: 80px;
height: 2px;
background: #61b4f7;
border: none;
/* border-radius: 3px; */
}
input[type=range]::-moz-range-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 80px;
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #61b4f7;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<div class="slider-wrapper">
<input type="range" orient="vertical" class="volume-slider"/>
</div>

Change text color onclick

I have a toggle button and when I click the button I want to be able to change the colors of the text from a lighter color when not selected to black when selected. Right now it is only working on one of the buttons. Attached is a fiddle of my code. https://jsfiddle.net/h2db7qLp/
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
} else {
event.classList.add('off');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px"adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short" onclick="onContainerClick(this)">L</div>
<div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>
I think that by adding the class 'on' on change it goes well, also you don't need to call your handler on every div, just call once.
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
event.classList.add('on');
} else {
event.classList.add('off');
event.classList.remove('on');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {}
.container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px "adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short">L</div>
<div class="label right-short">R</div>
</div>

How can I create a dual range slider using CSS3 and Javascript?

I'm trying to create a price range, by using two range elements
like this:
CSS code:
.first{
position : relative;
top :10px;
left :10px;
margin : 0;
padding : 0;
border : 1px solid red;
border-top : 4px solid transparent;
border-radius :3px;
z-index:0;
}
.next{
position : relative;
top :0px;
left :-153px;
margin : 0;
padding : 0;
border : 1px solid red;
border-bottom : 1px solid transparent;
border-radius :3px;
z-index : 4;
}
HTML code:
<span>price :</span>
<input class ="first" type="range" min="0" max="10000" step="100" value="0" multiple>
<input class ="next" type="range" min="0" max="10000" step="100" value="10000" multiple>
Is it possible to style a theme to look like a jQuery range slider?
CSS CODE :
input[type=range] {
-webkit-appearance: none;
width: 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #d3d3d3;
height: 16px;
width: 16px;
border-radius: 3px;
background: #e6e6e6;
cursor: pointer;
margin-top: -3px;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #DADADA;
border: 1px solid #999999;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
border: 1px solid #d3d3d3;
height: 16px;
width: 16px;
border-radius: 3px;
background: #e6e6e6;
cursor: pointer;
}
input[type=range]::-ms-thumb {
border: 1px solid #d3d3d3;
height: 16px;
width: 16px;
border-radius: 3px;
background: #e6e6e6;
cursor: pointer;
}
input[type=range]::-ms-thumb:hover {
background: #DADADA;
border: 1px solid #999999;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
cursor: pointer;
background: #FFF;
border-radius: 5px;
border: 1px solid #010101;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #FFF;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12px;
cursor: pointer;
background: #FFF;
border-radius: 5px;
border: 1px solid #aaaaaa;
}
input[type=range]::-ms-track {
width: 100%;
height: 12px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 1px solid #aaaaaa;
border-radius: 2.6px;
}
input[type=range]:focus::-ms-fill-lower {
background: #FFF;
}
input[type=range]::-ms-fill-upper {
background: #FFF;
border: 1px solid #aaaaaa;
border-radius: 5px;
}
input[type=range]:focus::-ms-fill-upper {
background: #FFF;
}

Categories