.range_slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 5px;
background: linear-gradient(to right, #3C7EE1 0%, #3C7EE1 50%, #d3d3d3 50%, #d3d3d3 100%);
outline: none !important;
opacity: 1;
}
.range_slider_inner {
margin-right: 7px;
width: 100%;
}
.range_slider_inner {
position: relative;
}
.range_slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--uacf7-slider-handle-width);
height: var(--uacf7-slider-handle-height);
background: var(--uacf7-slider-handle-color);
border-radius: var(--uacf7-slider-handle-border-radius);
cursor: pointer;
border: none;
}
.range_slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--uacf7-slider-handle-width);
height: var(--uacf7-slider-handle-height);
background: var(--uacf7-slider-handle-color);
border-radius: var(--uacf7-slider-handle-border-radius);
cursor: pointer;
border: none;
}
.range_slider_wrap {
display: flex;
position: relative;
}
.range_absulate { 
background-color: #fff;
text-align: center;
border: 1px solid #ddd;
line-height: 1.2;
border-radius: 3px; 
margin-top: 3px !important; 
padding: 3px 5px;
display: flex;
gap: 3px;
} .range_slider_wrap.style-2 {
display: inline-block;
width: 100%;
margin-top: 15px;
}
.range_slider_wrap.style-2 .range_slider_inner {
margin-right: 0 !important;
}
.range_slider_wrap.style-2 .range_absulate {
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
}
.range_slider_wrap.style-2 .range_slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--uacf7-slider-handle-width);
height: var(--uacf7-slider-handle-height);
border-radius: var(--uacf7-slider-handle-border-radius);
background: var(--uacf7-slider-handle-color);
cursor: pointer;
border: none;
background-size: cover;
background-position: center;
}
.range_slider_wrap.style-2 .range_slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--uacf7-slider-handle-width);
height: var(--uacf7-slider-handle-height);
border-radius: var(--uacf7-slider-handle-border-radius);
background: var(--uacf7-slider-handle-color);
cursor: pointer;
border: none;
background-size: cover;
background-position: center;
} 
.range_slider_wrap.style-2 .range_absulate::after {
top: 0;
top: 100%;
left: 15px;
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 6px solid #ddd;
margin-left: -5px;
z-index: 2;
} .range-value-field input{ 
-moz-appearance: textfield;
}
.range-value {
position: relative;
}
.range-value-field {
position: absolute;
width: auto;
height: auto;
background-color: #fff;
box-shadow: 0px 0px 5px 0px #ddd;
border-radius: 5px;
padding: 5px 11px;
}
.range-value-field.min-range {
left: 0;
}
.range-value-field.max-range {
right: 0;
}
.range-value-field .show-values {
width: 100%;
text-align: center;
border: none;
outline: none;
font-size: 14px;
color: #5A5B6A;
background-color: #fff !important;
}
.range-value-field span { width: 100%;
text-align: center;
font-size: 12px;
color: #B4B4BB;
}
.range-value {
margin-top: 25px;
margin-bottom: 10px;
}
.mutli-range .ui-state-default, .ui-widget-content .ui-state-default{
background-size: cover;
background-position: center;
} .slider-container {
width: 300px; 
}
.slider-container .back-bar {
height: 10px;
position: relative;
}
.slider-container .back-bar .selected-bar {
position: absolute;
height: 100%;
}
.slider-container .back-bar .pointer {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
cursor: col-resize;
opacity: 1;
z-index: 2;
}
.slider-container .back-bar .pointer.last-active {
z-index: 3;
}
.slider-container .back-bar .pointer-label {
position: absolute;
top: -17px;
font-size: 8px;
background: white;
white-space: nowrap;
line-height: 1;
}
.slider-container .back-bar .focused {
z-index: 10;
}
.slider-container .clickable-dummy {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.slider-container .scale {
top: 2px;
position: relative;
}
.slider-container .scale span {
position: absolute;
height: 5px;
border-left: 1px solid #999;
font-size: 0;
}
.slider-container .scale ins {
font-size: 14px;
text-decoration: none;
position: absolute;
left: -2;
top: 5px;
color: #999;
line-height: 1;
}
.slider-container.slider-readonly .clickable-dummy,
.slider-container.slider-readonly .pointer {
cursor: auto;
}
.theme-green .back-bar {
height: 9px;
border-radius: 2px;
background-color: #eeeeee; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-green .back-bar .selected-bar {
border-radius: 2px;
background-color: var(--uacf7-slider-Selection-Color); 
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
}
.theme-green .back-bar .pointer {
width: 14px;
height: 14px;
top: -3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: none;
background-color: var(--uacf7-slider-handle-color);
}
.theme-green .back-bar .pointer-label {
color: #999;
}
.theme-green .back-bar .focused {
color: #333;
}
.theme-green .scale span {
border-left: 1px solid #e5e5e5;
}
.theme-green .scale ins {
color: #999;
}
.theme-blue .back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-blue .back-bar .selected-bar {
border-radius: 2px;
background-color: #92c1f9; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
}
.theme-blue .back-bar .pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
background-color: #e7e7e7; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-blue .back-bar .pointer-label {
color: #999;
}
.theme-blue .back-bar .focused {
color: #333;
}
.theme-blue .scale span {
border-left: 1px solid #e5e5e5;
}
.theme-blue .scale ins {
color: #999;
} .pointer-label.high, .pointer-label.low {
height: 23px;
width: 40px;
background-color: #fff;
text-align: center;
border: 1px solid #ddd;
line-height: 1.2;
border-radius: 3px;
display: inline-block;
margin-top: 3px !important;
}
.pointer-label.high, .pointer-label.low   {
position: absolute;
top: -40px !important;
left: 100%;
font-size: 15px !important;
padding: 3px;
margin-left: 0;
}
.pointer-label.high::after, .pointer-label.low:after {
top: 0;
top: 100%;
left: 15px;
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 6px solid #ddd;
margin-left: -5px;
z-index: 2;
}
.scale span:after {
position: absolute;
left: -7px;
top: -14px;
height: 14px;
width: 14px;
content: '';
background-color: var(--uacf7-slider-Selection-Color);
border-radius: 10px;
}
.demo-output {
margin-bottom: 20px;
margin-top: 45px;
}
.slider-container.theme-green{
width: 100%;
}
.range-value-field.value-range {
position: relative;
}
.range-value-field.value-range {
position: relative;
} 
.mutli-range.style-one .range-value-field {
position: relative; 
width: auto;
text-align: center;
line-height: 2;
display: inline-block;
padding: 5px 11px;
}
.mutli-range.style-one .range-value-field span {
display: initial;
font-size: 17px;
}
.mutli-range.style-two .range-value {
height: 54px;
}
.mutli-range.style-one .ui-slider-handle.ui-corner-all.ui-state-default {
background-color: #fff;
border: 4px solid var(--uacf7-slider-handle-color) !important;
}