File: /var/www/panigaletech.com/wp-content/themes/panigale/css/rangeslider.css
/*
.slider.slider-horizontal {
min-height: 34px;
width: 100%;
}
.slider.slider-horizontal .slider-selection {
background: #003a70;
}
.slider.slider-horizontal .slider-handle {
background: #003a70;
border: 2px solid #fff;
margin: -1.0rem 0 0 -1.5rem;
height: 2.0rem;
width: 2.0rem;
}
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 100%;
height: 0.2rem;
}
.slider.slider-horizontal .slider-track {
height: 0.5rem;
width: 100%;
margin-top: -0.5rem;
top: 50%;
left: 0;
background-color: #e2e2e2;
}
.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
margin-left: -1.0rem;
margin-top: -0.7rem;
}
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
.slider.slider-horizontal .slider-tick-label-container {
white-space: nowrap;
margin-top: 20px;
}
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
padding-top: 4px;
display: inline-block;
text-align: center;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
margin-left: -5px;
left: 50%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-track-low,
.slider.slider-vertical .slider-track-high {
width: 100%;
left: 0;
right: 0;
}
.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
margin-left: -5px;
margin-top: -10px;
}
.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider.slider-disabled .slider-handle {
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
}
.slider.slider-disabled .slider-track {
background-color: #e2e2e2;
cursor: not-allowed;
}
.slider input {
display: none;
}
.slider .tooltip.top {
margin-top: -36px;
}
.slider .tooltip-inner {
white-space: nowrap;
}
.slider .hide {
display: none;
}
.slider-track {
position: absolute;
cursor: pointer;
width: 100%;
height: 0.2rem;
}
.slider-selection {
position: absolute;
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
}
.slider-selection.tick-slider-selection {
background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
}
.slider-track-low,
.slider-track-high {
position: absolute;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
}
.slider-handle {
position: absolute;
width: 20px;
height: 20px;
background-color: #003a70;
background-image: -webkit-linear-gradient(top, #149bdf 0%, #0480be 100%);
background-image: -o-linear-gradient(top, #149bdf 0%, #0480be 100%);
background-image: linear-gradient(to bottom, #149bdf 0%, #0480be 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
filter: none;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border: 0px solid transparent;
}
.slider-handle.round {
border-radius: 50%;
}
.slider-handle.triangle {
background: transparent none;
}
.slider-handle.custom {
background: transparent none;
}
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
.slider-tick {
position: absolute;
width: 20px;
height: 20px;
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
filter: none;
opacity: 0.8;
border: 0px solid transparent;
}
.slider-tick.round {
border-radius: 50%;
}
.slider-tick.triangle {
background: transparent none;
}
.slider-tick.custom {
background: transparent none;
}
.slider-tick.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
.slider-tick.in-selection {
background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
opacity: 1;
} */
.range {
position: relative;
padding-top: 3.0rem;
}
.range input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
width: 100%;
height: 1.4rem;
cursor: pointer;
display: block;
background-color: transparent;
}
.range input[type=range]:focus {
outline: none;
}
.range input[type=range][disabled] {
opacity: .3;
cursor: default;
}
.range .rangeslider {
position: relative;
height: 1.4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.range .rangeslider:before {
box-sizing: border-box;
width: 100%;
height: 0.4rem;
background: #e6e6e6;
border-radius: 100px;
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.range input::-webkit-slider-runnable-track {
box-sizing: border-box;
width: 100%;
height: 0.4rem;
background: #e6e6e6;
border-radius: 100px;
margin: 1.1rem 0;
}
.range input::-moz-range-track {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
margin: 11px 0;
}
.range input::-ms-track {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
color: transparent;
padding: 11px 0;
background: transparent;
border-color: transparent;
}
.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
}
.range input::-ms-fill-lower {
background: #003a70;
}
.range .rangeslider-fill-lower {
background-color: #003a70;
border-radius: 100px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 4px;
will-change: width;
}
.range input::-webkit-slider-thumb {
box-sizing: border-box;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
background: #003a70;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 2px;
}
.range input::-moz-range-thumb {
box-sizing: border-box;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
background: #003a70;
cursor: pointer;
cursor: pointer;
}
.range input::-ms-thumb {
box-sizing: border-box;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
background: #003a70;
cursor: pointer;
cursor: pointer;
}
.range .rangeslider-thumb {
box-sizing: border-box;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
background: #003a70;
cursor: pointer;
cursor: pointer;
position: absolute;
touch-action: pan-x;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
will-change: left;
}
.range .range-output {
position: absolute;
left: 6px;
top: 6px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.range .range-output .output {
display: block;
background: #fff;
padding:0.5rem 0.7rem;
border-radius: 2.5rem;
white-space: nowrap;
font-weight: bold;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
color: #222;
margin-top: -1.0rem;
}