Fix Bug 20029.

apps/common/main/lib/component/MultiSliderGradient.js

@@ -63,7 +63,10 @@ define([
             '<div class="slider multi-slider-gradient">',
             '<div class="track"></div>',
             '<% _.each(items, function(item) { %>',
-            '<div class="thumb img-commonctrl" style=""></div>',
+            '<div class="thumb img-commonctrl" style="">',
+                '<div class="thumb-top"></div>',
+                '<div class="thumb-bottom"></div>',
+            '</div>',
             '<% }); %>',
             '</div>'
         ].join('')),
@@ -98,6 +101,7 @@ define([
                 me.thumbs[i].thumb.on('dblclick', null, function() {
                     me.trigger('thumbdblclick', me);
                 });
+                me.thumbs[i].thumbcolor = me.thumbs[i].thumb.find('> div');
             }
 
             if (me.styleStr!=='') {
@@ -118,6 +122,7 @@ define([
         setColorValue: function(color, index) {
             var ind = (index!==undefined) ? index : this.currentThumb;
             this.colorValues[ind] = color;
+            this.thumbs[ind].thumbcolor.css('background-color', color);
             this.changeGradientStyle();
         },
 

apps/common/main/resources/less/multislider-gradient.less

@@ -4,10 +4,41 @@
 
     .thumb {
         top: 18px;
-        background-position: @multislide-thumb-offset-x @multislide-thumb-offset-y;
+        background: none;
 
-        &.active {
-            background-position: @multislide-thumb-offset-x @multislide-thumb-offset-y - 30px;
+        .thumb-top {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 9px;
+            height: 9px;
+            background-color: #ffffff;
+            -moz-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+            border-top: solid 1px @gray-darker;
+            border-left: solid 1px @gray-darker;
+            border-radius: 0 3px;
+            box-sizing: content-box;
+        }
+
+        .thumb-bottom {
+            position: absolute;
+            top: 6px;
+            left: 1px;
+            width: 10px;
+            height: 8px;
+            background-color: #ffffff;
+            border: solid 1px @gray-darker;
+            border-top: none;
+            border-radius: 2px;
+            box-sizing: content-box;
+        }
+
+        &.active .thumb-bottom {
+            border-bottom-width: 2px;
         }
     }