.multirange {
position: relative;
height:50px;
}
.multirange input[type=range] {
position: absolute;
box-sizing: border-box;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 100%;
height:50px;
margin: 0;
padding: 0 2px;
overflow: visible;
border: 0;
top:0;
border-radius: 4px;
background: transparent;
pointer-events: none;
outline: none;
}
.multirange input[type=range]:active,
.multirange input[type=range]:focus{
outline: none;
}
.multirange .range-progress{
position:absolute;
background-color:rgb(82,49,93);
top:35%;
left:0;
width:calc(100% - 24px);
height:30%;
border:1px solid gray;
border-radius:4px;
margin: 0 12px;
}
.multirange .range-selected{
position:absolute;
background-image:linear-gradient(to bottom, #E2BCEC, #A548A4, #531753);
top:0;
left:0;
right:0;
height:100%;
border-radius:4px;
}
.multirange input[type=range]::-moz-focus-outer {
border: 0;
}
.multirange input[type=range]::-webkit-slider-thumb{
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background:white;
background-image: radial-gradient(circle at 95% 15%, #FDE3FD, #8D678F);
position: relative;
margin: 5px 0;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: all;
z-index:2;
}
.multirange input[type=range]::-ms-thumb{
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background:white;
background-image: radial-gradient(circle at 95% 15%, #FDE3FD, #8D678F);
position: relative;
margin: 5px 0;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: all;
z-index:2;
}
.multirange input[type=range]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
border:1px solid gray;
background:white;
background-image: radial-gradient(circle at 95% 15%, #FDE3FD, #8D678F);
position: relative;
margin: 5px 0;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: all;
z-index:2;
}
.multirange input[type=range]::-ms-track {
-webkit-appearance: none;
background: transparent;
color: transparent;
}
.multirange input[type=range]::-moz-range-track {
-moz-appearance: none;
background: transparent;
color: transparent;
}
.multirange input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
border: transparent;
}
.multirange .sign {
opacity: 1;
position: absolute;
bottom: 200%;
z-index:3;
background-image: linear-gradient(45deg, rgb(210,141,171), rgb(167,71,135), rgb(137,44,101));
box-shadow: inset 1px 1px 0px rgba(255,255,255,.5),inset -1px -1px 0px rgba(0,0,0,.3),
inset 1px 1px 1px 1px rgba(255,255,255,.3),inset -1px -1px 1px 1px rgba(0,0,0,.3),
2px 2px 2px rgba(0,0,0,.2), 3px 3px 3px rgba(0,0,0,.1);
color: #fff;
width: auto;
height: 28px;
padding:0 16px;
border-radius: 28px;
-webkit-border-radius: 28px;
text-align: center;
white-space:nowrap;
}
.multirange .sign-l {
left:-16px;
}
.multirange .sign-m {
left:calc(100% - 16px);
}
.multirange .sign > span.value {
font-size: 12px;
font-weight: bold;
line-height: 28px;
}
.multirange .sign > span.sign-sym {
font-size: 12px;
font-weight: normal;
line-height: 28px;
}
.multirange:hover .sign {
opacity: 1;
}
input#range-price-lower,
input#range-height-lower,
input#range-width-lower{
left:0;
}
input#range-price-upper,
input#range-height-upper,
input#range-width-upper{
right:0;
}