dualrange.css

.dualrange{display: inline-block;position: relative;overflow: hidden;}
.dualrange input{margin: 0;width: 100%;z-index: 2;opacity: 0;}
.dualrange .dualrange__zindex{z-index: 3;}
.dualrange__input-max{right: 0;position: absolute;}
.dualrange__input-min{left: 0;position: relative;}
.dualrange__max, .dualrange__min{position: absolute;top: 0;left: 100%;top: 50%;width: 22px;height: 22px;background-color: #000;position: absolute;border-radius: 100%;background-color: #fff;border: 4px solid #f98100;}
.dualrange__min{left: 0;transform: translate(0%, -50%);}
.dualrange__max{left: 100%;transform: translate(-100%, -50%);}
.dualrange__max:before, .dualrange__min:before{content: '';position: absolute;top: 50%;transform: translateY(-50%);z-index: -2;height: 4px;background-color: #e07400;width: 100vw;}
.dualrange__min:before{right: 100%;margin-right: 4px;}
.dualrange__max:before{left: 100%;width: 1000px;margin-left: 4px;}
.dualrange__range{height: 4px;background-color: #f98100;position: absolute;left: 5px;right: 5px;top: 50%;transform: translateY(-50%);z-index: -1;}
@media (max-width: 1024px){
	.dualrange{height: 62px;}
	.dualrange__input-min, .dualrange__input-max{height: 50%;}
	.dualrange__input-min{top: 0px;}
	.dualrange__input-max{top: 50%;}
	.dualrange__min{top: 10px;}
	.dualrange__max{top: 52px;}
	.dualrange__max, .dualrange__min{border-radius: 4px;height: 20px;border-width: 3px;}
	.dualrange__min:before{top: 28px;margin-right: -9px;}
	.dualrange__max:before{top: -14px;margin-left: -8px;}
	.dualrange__min:after, .dualrange__max:after{content: '';position: absolute;background-color: #fff;z-index: 1;width: 12px;height: 12px;border: 3px solid #f98100;}
	.dualrange__min:after{border-left: none;border-top: none;transform: rotate(45deg) translate(6px, 5px);}
	.dualrange__max:after{border-right: none;border-bottom: none;transform: rotate(45deg) translate(-6px, -7px);}
}