{
nutuiRangeInactiveColor: 'rgba(163,184,255,1)',
nutuiRangeMargin: '20px',
nutuiRangeHeight: '6px',
+ nutuiRangeTickSize: '11px',
}}
>
{
style={{
position: 'absolute',
display: 'flex',
- width: pxTransform(26),
+ minWidth: pxTransform(36),
+ padding: `0 ${pxTransform(6)}`,
+ height: pxTransform(20),
+ border: '1px solid var(--nutui-color-background-overlay,#fff)',
backgroundColor: 'red',
borderRadius: pxTransform(10),
+ boxShadow:
+ '0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12)',
justifyContent: 'center',
top: '50%',
left: '50%',
@@ -52,7 +57,7 @@ const Demo11 = () => {
? {
height: pxTransform(18),
color: 'white',
- fontSize: pxTransform(10),
+ fontSize: pxTransform(12),
lineHeight: 1,
textAlign: 'center',
paddingTop: pxTransform(4),
@@ -60,7 +65,7 @@ const Demo11 = () => {
}
: {
color: 'white',
- fontSize: pxTransform(10),
+ fontSize: pxTransform(12),
lineHeight: pxTransform(18),
textAlign: 'center',
}
diff --git a/src/packages/range/doc.en-US.md b/src/packages/range/doc.en-US.md
index f5e9092ae4..d0c4c77581 100644
--- a/src/packages/range/doc.en-US.md
+++ b/src/packages/range/doc.en-US.md
@@ -146,13 +146,15 @@ The component provides the following CSS variables, which can be used to customi
| Name | Description | Default |
| --- | --- | --- |
| \--nutui-range-color | font color | `$color-title` |
-| \--nutui-range-margin | margin | `15px` |
+| \--nutui-range-margin | margin | `16px` |
| \--nutui-range-height | stroke width | `4px` |
| \--nutui-range-active-color | active color | `$color-primary` |
-| \--nutui-range-inactive-color | inactive color | `#fa958c` |
-| \--nutui-range-button-background | button background | `$white` |
-| \--nutui-range-button-width | button width | `24px` |
-| \--nutui-range-button-height | button height | `24px` |
-| \--nutui-range-button-border | button border | `1px solid $color-primary` |
+| \--nutui-range-disabled-color | disabled range color | `$color-primary-light-pressed` |
+| \--nutui-range-inactive-color | inactive color | `$color-background-component` |
+| \--nutui-range-button-background | button background | `$color-primary-text` |
+| \--nutui-range-button-width | button width | `20px` |
+| \--nutui-range-button-height | button height | `20px` |
+| \--nutui-range-button-border | button border | `1px solid $color-border` |
+| \--nutui-range-tick-size | tick dot size | `8px` |
diff --git a/src/packages/range/doc.md b/src/packages/range/doc.md
index b836d2cc24..45f4069503 100644
--- a/src/packages/range/doc.md
+++ b/src/packages/range/doc.md
@@ -146,13 +146,15 @@ import { Range } from '@nutui/nutui-react'
| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-range-color | 字体颜色 | `$color-title` |
-| \--nutui-range-margin | 进度条外边距 | `15px` |
+| \--nutui-range-margin | 进度条外边距 | `16px` |
| \--nutui-range-height | 进度条的宽度 | `4px` |
| \--nutui-range-active-color | 激活颜色 | `$color-primary` |
-| \--nutui-range-inactive-color | 未激活颜色 | `#fa958c` |
-| \--nutui-range-button-background | 按钮背景 | `$white` |
-| \--nutui-range-button-width | 按钮宽度 | `24px` |
-| \--nutui-range-button-height | 按钮高度 | `24px` |
-| \--nutui-range-button-border | 按钮边框 | `1px solid $color-primary` |
+| \--nutui-range-disabled-color | 禁用区间颜色 | `$color-primary-light-pressed` |
+| \--nutui-range-inactive-color | 未激活颜色 | `$color-background-component` |
+| \--nutui-range-button-background | 按钮背景 | `$color-primary-text` |
+| \--nutui-range-button-width | 按钮宽度 | `20px` |
+| \--nutui-range-button-height | 按钮高度 | `20px` |
+| \--nutui-range-button-border | 按钮边框 | `1px solid $color-border` |
+| \--nutui-range-tick-size | 刻度点宽高 | `8px` |
diff --git a/src/packages/range/doc.taro.md b/src/packages/range/doc.taro.md
index 55ea0f7f73..f2af99c9f7 100644
--- a/src/packages/range/doc.taro.md
+++ b/src/packages/range/doc.taro.md
@@ -146,13 +146,15 @@ import { Range } from '@nutui/nutui-react-taro'
| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-range-color | 字体颜色 | `$color-title` |
-| \--nutui-range-margin | 进度条外边距 | `15px` |
+| \--nutui-range-margin | 进度条外边距 | `16px` |
| \--nutui-range-height | 进度条的宽度 | `4px` |
| \--nutui-range-active-color | 激活颜色 | `$color-primary` |
-| \--nutui-range-inactive-color | 未激活颜色 | `#fa958c` |
-| \--nutui-range-button-background | 按钮背景 | `$white` |
-| \--nutui-range-button-width | 按钮宽度 | `24px` |
-| \--nutui-range-button-height | 按钮高度 | `24px` |
-| \--nutui-range-button-border | 按钮边框 | `1px solid $color-primary` |
+| \--nutui-range-disabled-color | 禁用区间颜色 | `$color-primary-light-pressed` |
+| \--nutui-range-inactive-color | 未激活颜色 | `$color-background-component` |
+| \--nutui-range-button-background | 按钮背景 | `$color-primary-text` |
+| \--nutui-range-button-width | 按钮宽度 | `20px` |
+| \--nutui-range-button-height | 按钮高度 | `20px` |
+| \--nutui-range-button-border | 按钮边框 | `1px solid $color-border` |
+| \--nutui-range-tick-size | 刻度点宽高 | `8px` |
diff --git a/src/packages/range/doc.zh-TW.md b/src/packages/range/doc.zh-TW.md
index 3fe2c7b88f..0785332536 100644
--- a/src/packages/range/doc.zh-TW.md
+++ b/src/packages/range/doc.zh-TW.md
@@ -146,13 +146,15 @@ import { Range } from '@nutui/nutui-react'
| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-range-color | 字體顏色 | `$color-title` |
-| \--nutui-range-margin | 進度條外邊距 | `15px` |
+| \--nutui-range-margin | 進度條外邊距 | `16px` |
| \--nutui-range-height | 進度條的寬度 | `4px` |
| \--nutui-range-active-color | 激活顏色 | `$color-primary` |
-| \--nutui-range-inactive-color | 未激活顏色 | `#fa958c` |
-| \--nutui-range-button-background | 按鈕背景 | `$white` |
-| \--nutui-range-button-width | 按鈕寬度 | `24px` |
-| \--nutui-range-button-height | 按鈕高度 | `24px` |
-| \--nutui-range-button-border | 按鈕邊框 | `1px solid $color-primary` |
+| \--nutui-range-disabled-color | 禁用區間顏色 | `$color-primary-light-pressed` |
+| \--nutui-range-inactive-color | 未激活顏色 | `$color-background-component` |
+| \--nutui-range-button-background | 按鈕背景 | `$color-primary-text` |
+| \--nutui-range-button-width | 按鈕寬度 | `20px` |
+| \--nutui-range-button-height | 按鈕高度 | `20px` |
+| \--nutui-range-button-border | 按鈕邊框 | `1px solid $color-border` |
+| \--nutui-range-tick-size | 刻度點寬高 | `8px` |
diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss
index adc282be67..c83929d0f4 100644
--- a/src/packages/range/range.scss
+++ b/src/packages/range/range.scss
@@ -32,7 +32,8 @@
&-min,
&-max {
- font-size: $font-size-s;
+ font-size: $font-size-md;
+ line-height: $line-height-md;
color: $range-color;
user-select: none;
}
@@ -59,7 +60,10 @@
height: $range-button-height;
background: $range-button-background;
border-radius: 50%;
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+ box-shadow:
+ 0 1px 10px 0 rgba(0, 0, 0, 0.05),
+ 0 4px 5px 0 rgba(0, 0, 0, 0.08),
+ 0 2px 4px -1px rgba(0, 0, 0, 0.12);
border: $range-button-border;
outline: none;
align-items: center;
@@ -96,29 +100,52 @@
}
&-number {
- position: relative;
- width: 200%;
- height: 24px;
- line-height: 14px;
- padding: 5px 0;
+ position: absolute;
left: 50%;
+ bottom: 100%;
+ transform: translateX(-50%);
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
user-select: none;
- font-size: $font-size-s;
- color: $range-color;
- text-align: center;
- vertical-align: center;
- box-sizing: border-box;
- // transform: translate3d(0, -100%, 0);
+ // 角标底部距游标 2px
+ margin-bottom: 2px;
+
+ &-body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 30px;
+ height: 30px;
+ padding: 0 8px;
+ box-sizing: border-box;
+ border-radius: 6px;
+ background: $color-mask;
+ color: $color-primary-text;
+ font-size: $font-size-s;
+ line-height: 1;
+ white-space: nowrap;
+ }
+
+ &-arrow {
+ width: 8px;
+ height: 4px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 8px 4px;
+ // 气泡角标(尖角朝下)
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAzklEQVQokZ2OMU4CYRBG38y6Ji7sEhNiYQeX8ACcgovQ7CmsbOg9hQegsbKioMKQHQibSMaQsPDbSKILBHSqmS/fexm5bd/3gT7/m+do/bl6SxqtOwjdv5Ai+lIu3ocKEOtmKCKTy2GZLOfTRwAFKIrCY61yEYqzMFisVb6/o/3i7pssTUY79AFonoKvtMrNrDwQfEs8S5PRNmgPuK7xHms1MLNfX0bUW+5+k7bGhND7me+i7WBpNq33DwQAa/+wRpoZ0AFEgzyV89nrse4XAnZKmareuPsAAAAASUVORK5CYII=');
+ }
}
}
&-disabled {
cursor: not-allowed;
- // 鸿蒙端在外层设置的透明度会分发到所有子图层上,导致样式与其他端不一致
- opacity: 0.54;
+
+ // 禁用区间颜色通过独立变量实现,避免整体 opacity 在鸿蒙端分发到子图层
+ .nut-range-bar {
+ background: $range-disabled-color;
+ }
.nut-range-button-wrapper,
.nut-range-button-wrapper-left,
@@ -130,36 +157,40 @@
&-mark {
position: absolute;
width: 100%;
- height: 14px;
+ height: $range-tick-size;
overflow: visible;
top: 50%;
}
&-mark-text-wrapper {
position: absolute;
+ top: 0;
height: 100%;
- top: 14px;
display: inline-block;
- transform: translateX(-10px);
}
&-mark-text {
position: absolute;
- line-height: 16px;
- font-size: $font-size-s;
- color: #999;
+ top: 16px;
+ left: 0;
+ transform: translateX(-50%);
+ line-height: $line-height-md;
+ font-size: $font-size-base;
+ color: $range-color;
text-align: center;
word-break: keep-all;
+ white-space: nowrap;
user-select: none;
}
&-tick {
position: absolute;
- top: -20px;
- width: 11px;
- height: 11px;
- left: 0px;
- border-radius: 6px;
+ top: 0;
+ left: 0;
+ width: $range-tick-size;
+ height: $range-tick-size;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
background: $range-inactive-color;
&-active {
@@ -176,7 +207,8 @@
.nut-range-vertical {
width: $range-height;
- margin: $range-margin 0px;
+ // 纵向左右范围文字距进度条 8px(横向为 16px,见 $range-margin)
+ margin: 8px 0px;
&-button {
&-wrapper,
@@ -201,9 +233,24 @@
}
&-number {
- left: 0px;
+ left: 100%;
top: 50%;
- // transform: translate3d(100%, 0, 0);
+ bottom: auto;
+ // arrow 在 DOM 中位于 body 之后,row-reverse 使角标显示在气泡左侧
+ flex-direction: row-reverse;
+ transform: translateY(-50%);
+ margin-bottom: 0;
+ // 角标在气泡左侧,距游标 2px
+ margin-left: 2px;
+
+ // arrow 元素类名固定为 .nut-range-button-number-arrow(无 vertical 变体),
+ // 需用后代选择器命中;横向角标尖朝下,顺时针旋转 90° 使尖角朝左指向游标
+ .nut-range-button-number-arrow {
+ transform: rotate(90deg);
+ // 8×4 盒旋转后视觉为 4px 宽,但布局盒仍占 8px,
+ // 用负外边距收掉气泡侧多出的 (8-4)/2 = 2px 空白
+ margin-right: -2px;
+ }
}
}
@@ -214,7 +261,7 @@
top: 0px;
right: 50%;
overflow: visible;
- font-size: $font-size-s;
+ font-size: $font-size-base;
padding: 0px;
}
@@ -223,29 +270,39 @@
}
&-mark-text-wrapper {
- // width: 20px;
- height: 16px;
+ height: $range-tick-size;
position: absolute;
+ left: 0;
+ right: 0;
display: inline-block;
user-select: none;
- transform: translateY(-11px);
+ // 以刻度点中线为基准纵向居中
+ transform: translateY(-50%);
}
&-mark-text {
- height: 100%;
- line-height: 16px;
- color: #999;
- text-align: center;
+ position: absolute;
+ left: auto;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ line-height: $line-height-md;
+ font-size: $font-size-base;
+ color: $range-color;
+ text-align: right;
word-break: keep-all;
+ white-space: nowrap;
}
&-tick {
position: absolute;
- top: 2px;
- left: 31px;
- width: 10px;
- height: 10px;
- border-radius: 5px;
+ top: 50%;
+ right: 0;
+ left: auto;
+ width: $range-tick-size;
+ height: $range-tick-size;
+ transform: translate(50%, -50%);
+ border-radius: 50%;
background: $range-inactive-color;
&-active {
@@ -275,14 +332,17 @@
}
&-tick {
- right: 0px;
+ left: auto;
+ right: 0;
/* #ifndef dynamic*/
- left: initial;
/* #endif */
+ transform: translate(50%, -50%);
}
&-mark-text {
- transform: translateX(10px);
+ left: auto;
+ right: 50%;
+ transform: translateX(50%);
}
&-vertical {
@@ -303,10 +363,6 @@
/* #endif */
// transform: translate3d(50%, -50%, 0);
}
-
- &-number {
- // transform: translate3d(-100%, 0, 0);
- }
}
&-mark {
@@ -315,14 +371,19 @@
}
&-tick {
- left: auto;
- right: 30px;
- margin-left: 0;
- margin-right: -0px;
+ right: auto;
+ left: 0;
+ transform: translate(-50%, -50%);
+ }
+
+ &-mark-text {
+ right: auto;
+ left: 16px;
+ text-align: left;
}
&-mark-text-wrapper {
- transform: translateY(-11px);
+ transform: translateY(-50%);
}
}
}
diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx
index 5e94d1cf3c..c95a9eb383 100644
--- a/src/packages/range/range.taro.tsx
+++ b/src/packages/range/range.taro.tsx
@@ -379,9 +379,6 @@ export const Range: FunctionComponent<
},
[innerValue]
)
- const buttonNumberTransform = useMemo(() => {
- return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)'
- }, [vertical])
const renderButton = useCallback(
(index?: number) => (
@@ -395,33 +392,25 @@ export const Range: FunctionComponent<
style={{ transform: 'translate(-50%, -50%)' }}
>
{currentDescription !== null && (
-
- {currentDescription
- ? currentDescription(curValue(index))
- : curValue(index)}
-
+
+ {currentDescription
+ ? currentDescription(curValue(index))
+ : curValue(index)}
+
+
+
)}
)}
>
),
- [
- button,
- buttonNumberTransform,
- curValue,
- currentDescription,
- rtl,
- rtlClassPrefix,
- vertical,
- ]
+ [button, curValue, currentDescription, rtl, rtlClassPrefix, vertical]
)
const renderMarks = useCallback(() => {
if (marksList.length <= 0) return null
@@ -435,27 +424,41 @@ export const Range: FunctionComponent<
})
return (
- {marksList.map((mark: any) => (
-
-
- {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]}
-
+ {marksList.map((mark: any) => {
+ const markText = Array.isArray(marks)
+ ? marksRef.current[mark]
+ : marks[mark]
+ const markTextStyle: Record = {}
+ if (vertical) {
+ markTextStyle.right =
+ 12 + Math.max(0, 3 - String(markText).length) * 3
+ } else if (mark === min) {
+ markTextStyle.transform = 'translateX(-4px)'
+ } else if (mark === max) {
+ markTextStyle.transform = 'translateX(calc(-100% + 4px))'
+ }
+ return (
-
- ))}
+ key={mark}
+ className={markClassName(mark)}
+ style={marksStyle(mark)}
+ >
+
+ {markText}
+
+
+
+ )
+ })}
)
}, [
@@ -463,6 +466,8 @@ export const Range: FunctionComponent<
marks,
marksList,
marksStyle,
+ max,
+ min,
rtl,
rtlClassPrefix,
tickClass,
diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx
index 0b2fdfc2df..f33c4932cb 100644
--- a/src/packages/range/range.tsx
+++ b/src/packages/range/range.tsx
@@ -360,10 +360,6 @@ export const Range: FunctionComponent<
const renderButton = useCallback(
(index?: number) => {
- const buttonNumberTransform = vertical
- ? 'translate(100%, -50%)'
- : 'translate(-50%, -100%)'
-
return (
<>
{button || (
@@ -382,13 +378,13 @@ export const Range: FunctionComponent<
[`${verticalClassPrefix}-button-number`]: vertical,
[`${rtlClassPrefix}-button-number`]: rtl,
})}
- style={{
- transform: buttonNumberTransform,
- }}
>
- {currentDescription
- ? currentDescription(curValue(index))
- : curValue(index)}
+
+ {currentDescription
+ ? currentDescription(curValue(index))
+ : curValue(index)}
+
+
)}
@@ -410,14 +406,26 @@ export const Range: FunctionComponent<
return (