diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js
index defce467a0..d1e6a7363e 100644
--- a/apps/common/main/lib/component/MultiSliderGradient.js
+++ b/apps/common/main/lib/component/MultiSliderGradient.js
@@ -75,7 +75,7 @@ define([
         initialize : function(options) {
             this.styleStr = {};
             this.tmbOptions={
-                width: 13,
+                width: 12,
                 height: 16,
                 border:0.5,
                 borderColor:'#c0c0c0',
@@ -228,16 +228,22 @@ define([
                 borderWidth = (this.tmbOptions.border*this.scale + 0.5)>>0,
                 x1 = borderWidth / 2,
                 x2 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale + 0.5)>>0) - borderWidth / 2,
-                x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0),
+                x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0) + 0.5*borderWidth,
+                x4 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale - 0.5)>>0) + 0.5*borderWidth - x3,
                 y1 = ((this.tmbOptions.width/2*this.scale + 0.5)>>0) + borderWidth / 2,
                 y2 = ((this.tmbOptions.height*this.scale + 0.5)>>0) - borderWidth / 2,
                 y3 = ((this.scale + 0.5)>>0) + borderWidth / 2;
+            x2 = (this.tmbOptions.width*this.scale >>0) - x2<=0 ? x2 - borderWidth : x2;
+            y2 = (this.tmbOptions.height*this.scale >>0) - y2<=0 ? y2 - borderWidth : y2;
+            this.tmbOptions.x2 = x2;
+            this.tmbOptions.y2 = y2;
             ctx.beginPath();
             ctx.moveTo(x1, y1);
             ctx.lineTo(x1, y2);
             ctx.lineTo(x2, y2);
             ctx.lineTo(x2, y1);
             ctx.lineTo(x3, y3);
+            (x3 !== x4) && ctx.lineTo(x4, y3);
             ctx.lineTo(x1, y1);
             ctx.closePath();
             ctx.lineWidth = borderWidth;
@@ -246,20 +252,21 @@ define([
         },
 
         thumbFill: function (ctx, color) {
-
             var borderWidth = (this.tmbOptions.border*this.scale + 0.5)>>0,
                 x1 = 2*borderWidth,
-                x2 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale + 0.5)>>0) - 2*borderWidth,
-                x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0),
+                x2 = this.tmbOptions.x2 - 1.5*borderWidth,
+                x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0) + 0.5*borderWidth,
+                x4 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale - 0.5)>>0) + 0.5*borderWidth - x3,
                 y1 = (((this.tmbOptions.width/2)*this.scale + 2 * borderWidth  + 0.5)>>0) ,
-                y2 = ((this.tmbOptions.height*this.scale + 0.5)>>0) - 2*borderWidth,
-                y3 = ((2*this.tmbOptions.border*this.scale + 0.5)>>0) + 3*borderWidth;
+                y2 = (this.tmbOptions.y2 - 1.5*borderWidth)>>0,
+                y3 = ((this.scale + 0.5 + 3*borderWidth)>>0) ;
             ctx.beginPath();
             ctx.moveTo(x1, y1);
             ctx.lineTo(x1, y2);
             ctx.lineTo(x2, y2);
             ctx.lineTo(x2, y1);
-            ctx.lineTo(x3, y3);
+            ctx.lineTo(x3, y3>>0);
+            (x3 !== x4) && ctx.lineTo(x4, y3>>0);
             ctx.lineTo(x1, y1);
             ctx.closePath();
             ctx.fillStyle = color;
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index ba5af832a3..dd6275fcb0 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -5,8 +5,9 @@
     .thumb {
         width: 13px;
         height: 15px;
-        top: 16px;
-        top: calc(17px - @scaled-one-px-value);
+        z-index: 1;
+        top: 18px;
+        top: calc(17px + @scaled-one-px-value);
         background: none;
         canvas{
             .margin-left(1px);
@@ -19,10 +20,11 @@
         &:hover::after{
             display: block;
             content: ' ';
+            z-index: -1;
             position: absolute;
-            width: 12px;
+            width: 11px;
             height: 10px;
-            bottom: 0;
+            bottom: @scaled-one-px-value;
             box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32);
             .margin-left(1px);
             .margin-left(@scaled-one-px-value);