yu.css.ui/dist/component/slider.css

纯CSS通用UI模块和组件

.yu-slider{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;margin:0 8px 14px 0}.yu-slider.disabled>.bottom-bar>.top-bar{background-color:#c5c7ca}.yu-slider.disabled>.bottom-bar>.top-bar>.circle{border-color:#c5c7ca}.yu-slider>.bottom-bar{position:relative;width:100%;height:4px;border-radius:2px;background-color:#e4e7ed}.yu-slider>.bottom-bar>.top-bar{height:4px;border-radius:2px;background-color:#409eff}.yu-slider>.bottom-bar>.top-bar>.circle{transform:translateX(-8px);position:absolute;top:-6px;box-sizing:border-box;line-height:14px;vertical-align:middle;display:inline-block;width:14px;height:14px;background-color:#fff;border:2px solid #409eff;border-radius:14px}.yu-slider>.bottom-bar>.top-bar>.circle>.tooltip{box-sizing:content-box;position:absolute;top:-36px;height:20px;padding:2px 7px;line-height:20px;background:#373737;border-radius:4px;color:#fff;font-size:14px;margin-left:-12px;text-align:center;min-width:20px;display:none}.yu-slider>.bottom-bar>.top-bar>.circle>.tooltip:after{content:"";display:inline-block;height:8px;width:8px;background-color:#373737;position:absolute;bottom:-4px;left:14px;transform:rotate(45deg)}.yu-slider>.bottom-bar>.top-bar>.circle.hover{width:16px;height:16px}.yu-slider>.bottom-bar>.top-bar>.circle.hover>.tooltip{display:inline-block}.yu-slider>.bottom-bar>.top-bar>.circle:hover{width:16px;height:16px}.yu-slider>.bottom-bar>.top-bar>.circle:hover>.tooltip{display:inline-block}.yu-slider>.bottom-bar>.top-bar>.point{position:absolute;width:4px;height:4px;background-color:#fff;border-radius:2px}.yu-slider>.bottom-bar:hover{cursor:pointer}.yu-slider input{display:none}