div.range-slider{position:relative;z-index:1;box-sizing:border-box;width:100%;height:14px;padding:5px 0;font-size:12px;border-radius:6px}div.range-slider *{-webkit-tap-highlight-color:rgba(0,0,0,0)}div.range-slider>div.rail{position:absolute;width:100%;height:4px;background-color:#e9e9e9;border-radius:6px}div.range-slider>div.track{position:absolute;left:0;height:4px;background-color:#8ed8fa}div.range-slider>div.handle{position:absolute;box-sizing:border-box;width:14px;height:14px;margin-left:-7px;margin-top:-5px;cursor:pointer;cursor:-webkit-grab;cursor:grab;background-color:#fff;border:solid 2px #8ed8fa;border-radius:50%}div.range-slider>div.handle:hover,div.range-slider>div.handle:focus{outline:none;box-shadow:0 0 5px #2db7f5}div.range-slider>div.handle:active,div.range-slider>div.handle.dragging{cursor:-webkit-grabbing;cursor:grabbing;border-color:#2db7f5;box-shadow:0 0 5px #2db7f5}div.range-slider>div.handle>span.tip{position:absolute;bottom:calc(100% + 6px);left:50%;z-index:1;box-sizing:border-box;min-width:24px;padding:0 6px;line-height:24px;text-align:center;white-space:nowrap;pointer-events:none;color:#fff;background:#6c6c6c;border-radius:6px;box-shadow:0 1px 4px #0003;transform:translate(-50%) scale(0);transform-origin:center calc(100% + 6px);transition-property:transform;transition-duration:.1s;transition-delay:.1s;transition-timing-function:ease-in}div.range-slider>div.handle>span.tip:after{position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-3px;content:"";border-width:6px 3px 0;border-color:#6C6C6C rgba(108,108,108,0) rgba(108,108,108,0);border-style:solid}div.range-slider>div.handle:hover>span.tip,div.range-slider>div.handle:active>span.tip,div.range-slider>div.handle.dragging>span.tip{transform:translate(-50%) scale(1);transition-timing-function:ease-out}div.range-slider>div.marks{position:absolute;top:18px;left:0;width:100%}div.range-slider>div.marks>span.text{position:absolute;display:inline-block;text-align:center;vertical-align:middle;white-space:nowrap;cursor:default;color:gray}div.range-slider>div.marks>span.text.active{color:#333}div.range-slider>div.steps{position:absolute;width:100%;height:4px}div.range-slider>div.steps>span.dot{position:absolute;bottom:-2px;box-sizing:border-box;width:8px;height:8px;margin-left:-4px;cursor:pointer;background-color:#fff;border:2px solid #E9E9E9;border-radius:50%}div.range-slider>div.steps>span.dot.active{border-color:#8ed8fa}div.range-slider.disabled{background-color:#e9e9e9}div.range-slider.disabled>div.track{background-color:#ccc}div.range-slider.disabled>div.handle{cursor:not-allowed;border-color:#ccc;box-shadow:none}div.range-slider.disabled>div.steps>span.dot{cursor:not-allowed;border-color:#ccc}div.range-slider.vertical{width:14px;height:100%;padding:0 5px}div.range-slider.vertical>div.rail{width:4px;height:100%}div.range-slider.vertical>div.track{left:5px;bottom:0;width:4px}div.range-slider.vertical>div.handle{margin-bottom:-7px;margin-left:-5px}div.range-slider.vertical>div.marks{top:0;left:18px;height:100%}div.range-slider.vertical>div.steps{width:4px;height:100%}div.range-slider.vertical>div.steps>span.dot{left:2px;margin-bottom:-4px}