.noUi-target, .noUi-target * { touch-action: none; user-select: none; box-sizing: border-box; } .noUi-target { position: relative; } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; } .noUi-connects { overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: 100%; transform-origin: 0 0; transform-style: flat; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { left: 0; right: auto; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { backface-visibility: hidden; position: absolute; } .noUi-touch-area { height: 100%; width: 100%; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { transition: transform 0.3s; } .noUi-horizontal { height: 14px; } .noUi-horizontal .noUi-handle { width: 20px; height: 20px; right: -10px; top: -4px; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { left: -10px; right: auto; } .noUi-target { background: #FAFAFA; border-radius: 4px; border: 1px solid #D3D3D3; padding: 0 8px; } .noUi-connects { border-radius: 3px; } .noUi-connect { background: #ddd; } .noUi-handle { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; } .noUi-pips, .noUi-pips * { box-sizing: border-box; } .noUi-pips { position: absolute; color: #999; } .noUi-value { position: absolute; white-space: nowrap; text-align: center; } .noUi-value-sub { color: #ccc; font-size: 10px; } .noUi-marker { position: absolute; background: #CCC; } .noUi-marker-sub { background: #AAA; } .noUi-marker-large { background: #AAA; } .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%; } .noUi-value-horizontal { transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 2px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap; } .noUi-horizontal .noUi-tooltip { transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-horizontal .noUi-origin > .noUi-tooltip { transform: translate(50%, 0); left: auto; bottom: 10px; }