@supports (--css: variables) {
input[type="range"].wcpt__multirange {
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
-webkit-appearance: none;
height: auto !important;
border: none !important;
background: transparent;
}
input[type="range"].wcpt__multirange:focus {
outline: none !important;
}
input[type="range"].wcpt__multirange {
position: absolute;
}
input[type="range"].wcpt__multirange::-webkit-slider-thumb {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--wcpt-range-slider-selected-track-color);
border: 2px solid #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.1s ease;
}
input[type="range"].wcpt__multirange::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
input[type="range"].wcpt__multirange::-moz-range-thumb {
transform: scale(1); z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--wcpt-range-slider-selected-track-color);
border: 2px solid #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.1s ease;
}
input[type="range"].wcpt__multirange::-moz-range-thumb:hover {
transform: scale(1.1);
}
input[type="range"].wcpt__multirange::-moz-range-track {
border-color: transparent; }
input[type="range"].wcpt__multirange.ghost {
position: relative;
background: var(--track-background);
--track-background: linear-gradient(
to right,
var(--default-color) var(--low),
var(--range-color) 0,
var(--range-color) var(--high),
var(--default-color) 0
)
no-repeat 0 45% / 100% 40%;
--range-color: var(--wcpt-range-slider-selected-track-color);
--default-color: var(--wcpt-range-slider-unselected-track-color);
}
input[type="range"].wcpt__multirange.ghost::-webkit-slider-runnable-track {
background: var(--track-background);
}
input[type="range"].wcpt__multirange.ghost::-moz-range-track {
background: var(--track-background);
}
input[type="range"].wcpt__multirange::-webkit-slider-runnable-track {
box-shadow: none !important;
}
}