BI-22465

dist/bundle.css

@@ -5136,8 +5136,7 @@ ul.ztree.zTreeDragUL {
   border-radius: 7px;
 }
 .bi-slider-track .gray-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #F2F4F7;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -5147,14 +5146,8 @@ ul.ztree.zTreeDragUL {
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.bi-slider-track .gray-track {
+.bi-slider-track .disabled-blue-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #d0d4da;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.bi-slider-track .blue-track {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;

dist/bundle.js

@@ -94933,7 +94933,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {
@@ -107178,7 +107182,11 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     setMinAndMax: function (v) {
@@ -107463,7 +107471,11 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {
@@ -107746,7 +107758,11 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {

dist/fineui.css

@@ -5136,8 +5136,7 @@ ul.ztree.zTreeDragUL {
   border-radius: 7px;
 }
 .bi-slider-track .gray-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #F2F4F7;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -5147,14 +5146,8 @@ ul.ztree.zTreeDragUL {
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.bi-slider-track .gray-track {
+.bi-slider-track .disabled-blue-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #d0d4da;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.bi-slider-track .blue-track {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;

dist/fineui.js

@@ -95176,7 +95176,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {
@@ -107421,7 +107425,11 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     setMinAndMax: function (v) {
@@ -107706,7 +107714,11 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {
@@ -107989,7 +108001,11 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {

dist/widget.css

@@ -635,8 +635,7 @@
   border-radius: 7px;
 }
 .bi-slider-track .gray-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #F2F4F7;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -646,14 +645,8 @@
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.bi-slider-track .gray-track {
+.bi-slider-track .disabled-blue-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #d0d4da;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.bi-slider-track .blue-track {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;

dist/widget.js

@@ -7310,7 +7310,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {
@@ -19555,7 +19559,11 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     setMinAndMax: function (v) {
@@ -19840,7 +19848,11 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {
@@ -20123,7 +20135,11 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {

src/css/widget/singleslider/track/widget.css

@@ -1,6 +1,5 @@
 .bi-slider-track .gray-track {
-  background-color: rgba(153, 153, 153, 0.3);
+  background-color: #F2F4F7;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -10,3 +9,9 @@
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
+.bi-slider-track .disabled-blue-track {
+  background-color: #d0d4da;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}

src/css/widget/singleslider/track/widget.track.css

@@ -1,12 +0,0 @@
-.bi-slider-track .gray-track {
-  background-color: rgba(153, 153, 153, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.bi-slider-track .blue-track {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}

src/less/lib/constant.less

@@ -40,6 +40,7 @@
 @background-color-dark: #d4dadd;
 @background-color-light-gray: #F2F4F7;
 @background-color-gray: #999999;
+@background-color-dark-gray: #d0d4da;
 @background-color-disabled: #cccccc;
 
 @background-color-negative: #ff4949;

src/less/widget/singleslider/track/widget.track.less

@@ -1,11 +1,15 @@
 @import "../../../index";
 
 .bi-slider-track {
-  .gray-track {
+  & .gray-track {
-    .background-color(@color-bi-background-gray, 30%);
+    background-color: @color-bi-background-light-gray;
     .border-radius(3px);
   }
-  .blue-track {
+  & .blue-track {
+    .border-radius(3px);
+  }
+  & .disabled-blue-track {
+    background-color: @background-color-dark-gray;
     .border-radius(3px);
   }
 }

src/widget/intervalslider/intervalslider.js

@@ -445,7 +445,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {

src/widget/singleslider/singleslider.js

@@ -291,7 +291,11 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSlider.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     setMinAndMax: function (v) {

src/widget/singleslider/singleslider.label.js

@@ -245,7 +245,11 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {

src/widget/singleslider/singleslider.normal.js

@@ -223,7 +223,11 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
 
     _setEnable: function (b) {
         BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
-        this.blueTrack && this.blueTrack.setVisible(!!b);
+        if(b) {
+            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+        } else {
+            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+        }
     },
 
     getValue: function () {