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>
Related
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)
I have code below for a content cycle I have created with the help from some other Stack Overflow users. Is it possible to have the circular arrow fill up partially depending on what box your hovered on. Example: If the user hovers on box four (the bottom box) the circular arrow would fill up with a different color only up until that box. Is this possible to do with pure CSS only? If not would this be possible with vanilla JavaScript (no Jquery)? Anything helps, cheers.
.container .row {
text-align: center;
position: relative;
}
.row {
position: relative;
}
.one {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.one:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.two {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
margin-left: -35px;
}
.two:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.three {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
margin-left: -35px;
}
.three:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.four {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.four:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.five {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.five:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.six {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.six:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.circle {
display: inline-block;
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
margin-bottom: -15px;
}
.invisible {
visibility: hidden;
display: inline-block;
background-color: #1f497d;
width: 130px;
height: 65px;
border-width: 3px;
border-style: solid;
border-color: #d6d6d6;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #d0d3d8;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
top: 15px;
left: 50%;
transform: translate(-50%, 0);
z-index: -1;
}
.arrow:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -10px;
left: 55px;
background: #fff;
transform: rotate(-120deg);
}
.arrow:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: 0px;
left: 40px;
transform: rotate(-120deg);
}
<div class="container">
<div class="row">
<div class="one"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="six"></div>
<div class="invisible"></div>
<div class="two"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="invisible"></div>
<div class="circle"></div>
<div class="invisible"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="five"></div>
<div class="invisible"></div>
<div class="three"></div>
</div>
<div class="row">
<div class="four"></div>
</div>
<div class="arrow"></div>
</div>
I have fully changed your layout.
Now everything works ok. And also, making changes in the position will be easier.
.container {
width: 250px;
height: 250px;
position: absolute;
top: 45px;
left: 0px;
right: 0px;
margin: auto;
}
.ele, .arrow, .circle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#one {
transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.ele:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.circle {
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #d0d3d8;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
z-index: -3;
left: -17px;
}
#two:hover ~ .arrow {
border-top-color: red;
transform: rotate(24deg);
}
#three:hover ~ .arrow {
border-top-color: red;
transform: rotate(66deg);
}
#four:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
transform: rotate(25deg);
}
#five:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
transform: rotate(26deg);
}
#six:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
transform: rotate(66deg);
}
#one:hover ~ .arrow {
border-color: red;
}
#one:hover ~ .circle:after {
border-top-color: red;
}
.circle:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -96px;
left: -36px;
background: #fff;
background-color: white;
transform: rotate(-120deg);
z-index: -1;
}
.circle:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: -83px;
left: -44px;
transform: rotate(-120deg);
}
<div class="container">
<div class="ele" id="one">1</div>
<div class="ele" id="two">2</div>
<div class="ele" id="three">3</div>
<div class="ele" id="four">4</div>
<div class="ele" id="five">5</div>
<div class="ele" id="six">6</div>
<div class="arrow"></div>
<div class="circle"></div>
</div>
If you don't mind using images for your arrow, you could have a different image for the arrow depending on which box is hovered and then you can change the image out via css:
.one:hover {
background: url("box1arrow.jpg"); // obviously, set this to whichever image you need
}
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'>
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>
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;
}