From 336c460378384815b6c5106d66cc789b6455b2f6 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 27 Dec 2020 16:24:16 +0800
Subject: [PATCH] refactor(slider): expand rail width to its dom width

---
 src/slider/src/Slider.vue                 | 16 ++++++++++------
 src/slider/src/styles/themed-base.cssr.js | 16 ++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/slider/src/Slider.vue b/src/slider/src/Slider.vue
index 2144876bf..ec230966c 100644
--- a/src/slider/src/Slider.vue
+++ b/src/slider/src/Slider.vue
@@ -329,17 +329,21 @@ export default {
       return null
     },
     firstHandleStyle () {
+      const { handleValue1, max, min, handleClicked1 } = this
+      const percentage = ((handleValue1 - min) / (max - min)) * 100
       return {
-        left:
-          ((this.handleValue1 - this.min) / (this.max - this.min)) * 100 + '%',
-        zIndex: this.handleClicked1 ? 1 : 0
+        left: `${percentage}%`,
+        transform: `translateX(${-percentage}%)`,
+        zIndex: handleClicked1 ? 1 : 0
       }
     },
     secondHandleStyle () {
+      const { handleValue2, max, min, handleClicked2 } = this
+      const percentage = ((handleValue2 - min) / (max - min)) * 100
       return {
-        left:
-          ((this.handleValue2 - this.min) / (this.max - this.min)) * 100 + '%',
-        zIndex: this.handleClicked2 ? 1 : 0
+        left: `${percentage}%`,
+        transform: `translateX(${-percentage}%)`,
+        zIndex: handleClicked2 ? 1 : 0
       }
     }
   },
diff --git a/src/slider/src/styles/themed-base.cssr.js b/src/slider/src/styles/themed-base.cssr.js
index 798ae7d71..4a68555f4 100644
--- a/src/slider/src/styles/themed-base.cssr.js
+++ b/src/slider/src/styles/themed-base.cssr.js
@@ -42,31 +42,27 @@ export default c([
           padding: calc((${handleSize} - ${railHeight}) / 2) 0;
           position: relative;
           z-index: 0;
-          width: calc(100% - 14px);
-          margin-left: 7px;
-          margin-right: 7px;
+          width: 100%;
           cursor: pointer;
         `
       }, [
         cB('slider-marks', {
           raw: `
             position: absolute;
-            top: 14px;
+            top: 18px;
             left: 0;
             right: 0;
           `
         }, [
           cB('slider-mark', {
-            raw: `
-              position: absolute;
-              transform: translateX(-50%);
-            `
+            position: 'absolute',
+            transform: 'translateX(-50%)'
           })
         ]),
         cM('with-mark', {
           raw: `
-            width: calc(100% - 24px);
-            margin: 8px 12px 32px 12px;
+            width: 100%;
+            margin: 8px 0 32px 0;
           `
         }),
         c('&:hover', [