style(range): 修订样式变量

src/packages/range/doc.en-US.md

@@ -436,7 +436,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-range-font-color | font color | `$gray1` |
+| \--nutui-range-color | font color | `$color-title` |
 | \--nutui-range-margin | margin | `15px` |
 | \--nutui-range-height | stroke width | `4px` |
 | \--nutui-range-active-color | active color | `$color-primary` |

src/packages/range/doc.md

@@ -436,7 +436,7 @@ export default App;
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-range-font-color | 字体颜色 | `$gray1` |
+| \--nutui-range-color | 字体颜色 | `$color-title` |
 | \--nutui-range-margin | 进度条外边距 | `15px` |
 | \--nutui-range-height | 进度条的宽度 | `4px` |
 | \--nutui-range-active-color | 激活颜色 | `$color-primary` |

src/packages/range/doc.taro.md

@@ -436,7 +436,7 @@ export default App;
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-range-font-color | 字体颜色 | `$gray1` |
+| \--nutui-range-color | 字体颜色 | `$color-title` |
 | \--nutui-range-margin | 进度条外边距 | `15px` |
 | \--nutui-range-height | 进度条的宽度 | `4px` |
 | \--nutui-range-active-color | 激活颜色 | `$color-primary` |

src/packages/range/doc.zh-TW.md

@@ -436,7 +436,7 @@ export default App;
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-range-font-color | 字體顏色 | `$gray1` |
+| \--nutui-range-color | 字體顏色 | `$color-title` |
 | \--nutui-range-margin | 進度條外邊距 | `15px` |
 | \--nutui-range-height | 進度條的寬度 | `4px` |
 | \--nutui-range-active-color | 激活顏色 | `$color-primary` |

src/packages/range/range.scss

@@ -4,19 +4,23 @@
   width: 100%;
   height: $range-height;
   align-items: center;
+
   .min,
   .max {
     font-size: $font-size-small;
-    color: $range-font-color;
+    color: $range-color;
     user-select: none;
   }
+
   &-vertical {
     height: 100%;
     flex-direction: column;
     padding: 0px 15px;
+
     .nut-range {
       width: $range-height;
       height: 100%;
+
       &-button {
         &-wrapper,
         &-wrapper-right {
@@ -35,12 +39,15 @@
           transform: translate3d(-50%, -50%, 0);
         }
       }
+
       .number {
         transform: translate3d(100%, 0, 0);
       }
+
       &-vertical {
         margin: $range-margin 0px;
       }
+
       &-mark {
         position: absolute;
         width: 100%;
@@ -64,6 +71,7 @@
         user-select: none;
         transform: translateY(-50%);
       }
+
       &-tick {
         position: absolute;
         top: 0px;
@@ -81,6 +89,7 @@
     }
   }
 }
+
 .nut-range {
   display: block;
   position: relative;
@@ -90,6 +99,7 @@
   background-color: $range-inactive-color;
   border-radius: 2px;
   cursor: pointer;
+
   &::before {
     position: absolute;
     top: -8px;
@@ -148,10 +158,11 @@
       justify-content: center;
       user-select: none;
       font-size: $font-size-small;
-      color: $range-font-color;
+      color: $range-color;
       transform: translate3d(0, -100%, 0);
     }
   }
+
   &-disabled {
     cursor: not-allowed;
     opacity: 0.54;

src/styles/variables.scss

@@ -1060,10 +1060,13 @@ $infiniteloading-bottom-color: var(
 ) !default;
 
 //range（✅）
-$range-font-color: var(--nutui-range-font-color, $gray1) !default;
+$range-color: var(--nutui-range-color, $gray1) !default;
 $range-height: var(--nutui-range-height, 4px) !default;
 $range-margin: var(--nutui-range-margin, 15px) !default;
-$range-inactive-color: var(--nutui-range-inactive-color, #fa958c) !default;
+$range-inactive-color: var(
+  --nutui-range-inactive-color,
+  $color-primary-light
+) !default;
 $range-active-color: var(--nutui-range-active-color, $color-primary) !default;
 $range-button-background: var(
   --nutui-range-button-background,