@mijadesign/mjui-react-taro/dist/esm/Range/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-range-container{display:flex;flex-direction:row;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center;justify-content:space-between}.nut-range-container-native{height:auto}.nut-range{display:block;position:relative;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff)));border-radius:2px;flex:1;cursor:pointer}.nut-range:before{position:absolute;inset-block:-8px;inset-inline:0;content:""}.nut-range-min,.nut-range-max{font-size:var(--nutui-font-size-1, 13px);color:var(--nutui-range-color, var(--nutui-color-title, #0d0d0d));-webkit-user-select:none;user-select:none}.nut-range-bar{display:block;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;background:var(--nutui-range-active-color, var(--nutui-color-primary, #006dfc));border-radius:2px}.nut-range-bar-animate{transition:all .2s}.nut-range-button{position:absolute;display:flex;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, #ffffff);border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #006dfc));outline:none;align-items:center;top:50%;left:50%}.nut-range-button-wrapper,.nut-range-button-wrapper-right,.nut-range-button-wrapper-left{width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px)}.nut-range-button-wrapper,.nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;left:100%;cursor:grab;outline:none}.nut-range-button-wrapper-left{position:absolute;top:50%;left:0;cursor:grab;outline:none;touch-action:none}.nut-range-button-number{position:relative;width:200%;height:24px;line-height:14px;padding:5px 0;left:50%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;font-size:var(--nutui-font-size-1, 13px);color:var(--nutui-range-color, var(--nutui-color-title, #0d0d0d));text-align:center;vertical-align:center;box-sizing:border-box}.nut-range-disabled{cursor:not-allowed;opacity:.54}.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%;height:14px;overflow:visible;top:50%}.nut-range-mark-text-wrapper{position:absolute;height:100%;top:14px;display:inline-block;transform:translate(-10px)}.nut-range-mark-text{position:absolute;line-height:16px;font-size:12px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none}.nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0;border-radius:6px;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff)))}.nut-range-tick-active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #006dfc))}.nut-range-vertical-container{height:100%;flex-direction:column;padding:0 15px}.nut-range-vertical{width:var(--nutui-range-height, 4px);margin:var(--nutui-range-margin, 15px) 0px}.nut-range-vertical-button-wrapper,.nut-range-vertical-button-wrapper-right{position:absolute;top:initial;top:100%;left:50%;right:initial}.nut-range-vertical-button-wrapper-left{top:0;left:50%;right:initial}.nut-range-vertical-button-number{left:0;top:50%}.nut-range-vertical-mark{position:absolute;width:36px;height:100%;top:0;right:50%;overflow:visible;font-size:12px;padding:0}.nut-range-vertical-mark-hm{left:-34px}.nut-range-vertical-mark-text-wrapper{height:16px;position:absolute;display:inline-block;-webkit-user-select:none;user-select:none;transform:translateY(-11px)}.nut-range-vertical-mark-text{height:100%;line-height:16px;color:#999;text-align:center;word-break:keep-all}.nut-range-vertical-tick{position:absolute;top:2px;left:31px;width:10px;height:10px;border-radius:5px;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff)))}.nut-range-vertical-tick-active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #006dfc))}[dir=rtl] .nut-range-button-wrapper,[dir=rtl] .nut-range-button-wrapper-right,.rtl-nut-range-button-wrapper,.rtl-nut-range-button-wrapper-right{left:0;right:initial}[dir=rtl] .nut-range-button-wrapper-left,.rtl-nut-range-button-wrapper-left,[dir=rtl] .nut-range-tick,.rtl-nut-range-tick{right:0;left:initial}[dir=rtl] .nut-range-mark-text,.rtl-nut-range-mark-text{transform:translate(10px)}[dir=rtl] .nut-range-vertical-button-wrapper,[dir=rtl] .nut-range-vertical-button-wrapper-right,.rtl-nut-range-vertical-button-wrapper,.rtl-nut-range-vertical-button-wrapper-right,[dir=rtl] .nut-range-vertical-button-wrapper-left,.rtl-nut-range-vertical-button-wrapper-left{right:50%;left:initial}[dir=rtl] .nut-range-vertical-mark,.rtl-nut-range-vertical-mark{right:auto;left:50%}[dir=rtl] .nut-range-vertical-tick,.rtl-nut-range-vertical-tick{left:auto;right:30px;margin-left:0;margin-right:0}[dir=rtl] .nut-range-vertical-mark-text-wrapper,.rtl-nut-range-vertical-mark-text-wrapper{transform:translateY(-11px)}