.double-range,.double-range>div{position:relative;width:100%;box-sizing:border-box}.double-range{--thumb-from-bg:#c1c1c1;--thumb-to-bg:#e1e1e1;--range-bar-bg:linear-gradient(to right, #c1c1c1, #e1e1e1);--thumb-size:20px;padding:calc(var(--thumb-size) + 10px);margin:auto;overflow:hidden}.double-range>div{padding:calc(var(--thumb-size)+ 10px)0;user-select:none;touch-action:none;z-index:2}.double-range label{position:absolute;display:inline-block;top:calc(50% - var(--thumb-size)/2 - 10px);font-size:14px;height:14px;line-height:14px;color:#333;border-radius:4px;white-space:nowrap;z-index:2;pointer-events:none;left:0;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.double-range label.from::after{display:inline-block;content:"–";padding:0 2px 0 3px;opacity:0}.double-range.collision label.from::after{opacity:1}.double-range label.from{transform:translate(calc(-50% + 7px),-50%);-webkit-transform:translate(calc(-50% + 7px),-50%)}.double-range .limit{position:absolute;bottom:calc(50% - var(--thumb-size)/2 - 10px);font-size:12px;line-height:12px;height:12px;color:#444;white-space:nowrap}.double-range .min.limit{left:0;transform:translate(-50%,50%);-webkit-transform:translate(-50%,50%)}.double-range .max.limit{right:0;transform:translate(50%,50%);-webkit-transform:translate(50%,50%)}.double-range .track{position:relative;height:6px;background:#f1f1f1;border-radius:3px;cursor:pointer;box-shadow:0 0 1px 1px rgba(0,0,0,.1)}.double-range .range-bar{position:absolute;top:0;height:100%;background:var(--range-bar-bg);border-radius:3px;z-index:1}.double-range .point,.double-range .thumb{position:absolute;display:inline-block;top:50%;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;border:0;outline:0;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.double-range .thumb{left:0;z-index:2;will-change:transform}.double-range .thumb.from{background:var(--thumb-from-bg)}.double-range .thumb.to{background:var(--thumb-to-bg)}.double-range .point{background:#f1f1f1;z-index:1;box-shadow:0 0 2px rgba(0,0,0,.2) inset}.double-range .start.point{left:0}.double-range .end.point{left:100%}.double-range .point::before,.double-range .thumb::before{content:"";display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;z-index:3}.double-range .thumb::before{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6),0 0 3px 1px rgba(0,0,0,.6),0 0 5px 0 rgba(0,0,0,.1) inset;transform:scale(.5);-webkit-transform:scale(.5);transition:all 200ms linear;-webkit-transition:all 200ms linear}.double-range .point::before{opacity:.1;background:#000;transform:scale(.2);-webkit-transform:scale(.3)}.double-range-dragging{cursor:w-resize!important}.double-range .thumb{cursor:w-resize;transition:box-shadow 200ms linear,transform 50ms linear;-webkit-transition:box-shadow 200ms linear,transform 50ms linear}.double-range .thumb.dragging::before,.double-range .thumb:focus::before,.double-range .thumb:hover::before{box-shadow:0 0 8px transparent,0 0 3px 3px rgba(0,0,0,.5),0 0 3px 3px rgba(0,0,0,.5) inset;opacity:.6}.double-range .thumb:focus{outline:2px solid rgba(0,0,0,.4);outline-offset:2px}