diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 30422c9c52..384fb5b321 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -297,8 +297,14 @@ class SliderZoomView extends DataZoomView {
         const rectX = isNaN(rect.x) ? 0 : rect.x;
         const rectY = isNaN(rect.y) ? 0 : rect.y;
 
-        thisGroup.x = location.x - rectX;
-        thisGroup.y = location.y - rectY;
+        // there is only scaleX on sliderGroup.
+        thisGroup.scaleX = this._size[0] / rect.width;
+        // scaleY on sliderGroup is a bad idea.
+        // Because of the moveHandleSize maybe greater than zoom bar height.
+        // clip is better than scale hard.
+        const scaleY = this._size[1] / rect.height;
+        thisGroup.x = location.x - rectX * thisGroup.scaleX;
+        thisGroup.y = location.y - rectY * scaleY;
         thisGroup.markRedraw();
     }
 
diff --git a/test/dataZoom-clip.html b/test/dataZoom-clip.html
index b360ee9716..8a120739f9 100644
--- a/test/dataZoom-clip.html
+++ b/test/dataZoom-clip.html
@@ -39,6 +39,7 @@
 
         <div id="main0"></div>
         <div id="main1"></div>
+        <div id="main2"></div>
         <div class="chart" id="b"></div>
 
 
@@ -290,6 +291,54 @@
 
 
 
+        <script>
+
+            require(['echarts'], function (echarts) {
+                var option = {
+                    color: ["#3398DB"],
+                    tooltip: {
+                        trigger: "axis"
+                    },
+                    grid: {
+                        left: 0,
+                        right: 0
+                    },
+                    xAxis: {
+                        data: ["2015-02-23", "2015-02-24"]
+                    },
+                    yAxis: {
+                        show: false,
+                    },
+                    dataZoom: [{
+                        showDetail: false,
+                        left: 0,
+                        right: 0,
+                        moveHandleStyle: {
+                            color: "rgba(215, 59, 59, 1)"
+                        },
+                        fillerColor:"rgba(0,0,0,0)",
+                        moveHandleSize: 7,
+                        handleSize: "100%",
+                        borderRadius:100,
+                        borderWidth:0
+                    }],
+                    series: {
+                        name: "Beijing AQI",
+                        type: "bar",
+                        data: [86, 207]
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'HandleIcon and dataZoomBar should be complete on default with **dataZoom.left = 0 and dataZoom.right = 0**',
+                    ],
+                    option: option
+                });
+            });
+
+        </script>
+
 
 
 
@@ -298,4 +347,4 @@
 
 
     </body>
-</html>
\ No newline at end of file
+</html>