test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 5.31 kB
CSS
.nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 2px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-range-font-max-color, var(--nsui-gray-color-7, #8C8C8C));user-select:none;display:flex}.nut-range-container .min.max-reach,.nut-range-container .max.max-reach{transform:translate(8px)}.nut-range-container .min.min-reach,.nut-range-container .max.min-reach{transform:translate(-8px)}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .min.max-reach,.nut-range-container-vertical .max.max-reach{transform:translateY(4px)}.nut-range-container-vertical .min.min-reach,.nut-range-container-vertical .max.min-reach{transform:translateY(-4px)}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 2px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;bottom:initial;top:0px;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{bottom:0px;top:inherit;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range .number{top:50%;left:unset;right:100%;transform:translate(-8px,-50%)}.nut-range-container-vertical .nut-range .number .triangle{position:absolute;left:100%;top:50%;transform:translateY(-50%);border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid var(--nutui-brand-color, #2C68FF);border-right:4px solid transparent}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 8px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;overflow:visible;font-size:12px;text-align:right;height:100%;top:initial;width:25px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translateY(50%)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:50%;left:-27px;width:6px;height:6px;border-radius:50%;transform:translateY(-50%);background:var(--nutui-range-inactive-color, var(--nsui-gray-color-2, #F5F5F5))}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-brand-color, #2C68FF))}.nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 2px);margin:0 var(--nutui-range-margin, 8px);background-color:var(--nutui-range-inactive-color, var(--nsui-gray-color-2, #F5F5F5));border-radius:var(--nutui-range-border-radius, 2px);cursor:pointer}.nut-range:before{position:absolute;top:-8px;right:0;bottom:-8px;left:0;content:""}.nut-range-bar{display:block;position:relative;width:100%;height:100%;background:var(--nutui-range-active-color, var(--nutui-brand-color, #2C68FF));border-radius:inherit;transition:all .2s}.nut-range-button{display:block;width:var(--nutui-range-button-width, 20px);height:var(--nutui-range-button-height, 20px);background:var(--nutui-range-button-background, var(--nutui-brand-text-color, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-brand-color, #2C68FF));outline:none}.nut-range-button-wrapper,.nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-button .number{display:flex;align-items:center;justify-content:center;user-select:none;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-range-font-color, var(--nsui-gray-color-1, #ffffff));transform:translate(-50%,-8px);height:28px;padding:0 8px;box-sizing:border-box;background-color:var(--nutui-brand-color, #2C68FF);position:absolute;left:50%;bottom:100%;border-radius:4px}.nut-range-button .number .triangle{position:absolute;top:100%;border-top:4px solid var(--nutui-brand-color, #2C68FF);border-bottom:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent}.nut-range-disabled{cursor:not-allowed}.nut-range-disabled .nut-range-bar{background-color:var(--nutui-range-disabled-color, #A3C6FF)}.nut-range-disabled .nut-range-button{border:var(--nutui-range-button-disabled-border, 1px solid #A3C6FF)}.nut-range-disabled .nut-range-button-wrapper,.nut-range-disabled .nut-range-button-wrapper-left,.nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:25px}.nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translate(-50%)}.nut-range-tick{position:absolute;top:-28px;width:6px;height:6px;left:50%;border-radius:50%;transform:translate(-50%);background:var(--nutui-range-inactive-color, var(--nsui-gray-color-2, #F5F5F5))}.nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-brand-color, #2C68FF))}