diff --git a/bi/slider.js b/bi/slider.js
index c2b2f9e5a..3f2ab4d33 100644
--- a/bi/slider.js
+++ b/bi/slider.js
@@ -11,7 +11,7 @@ BI.SliderIconButton = BI.inherit(BI.Widget, {
         BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
         this.slider = BI.createWidget({
             type: "bi.icon_button",
-            cls: "widget-slider-icon slider-button",
+            cls: "widget-slider-icon slider-button cursor-drag",
             iconWidth: 14,
             iconHeight: 14,
             height: 14,
diff --git a/bi/widget.css b/bi/widget.css
index 69f5f5394..7a30e6013 100644
--- a/bi/widget.css
+++ b/bi/widget.css
@@ -429,8 +429,38 @@
   box-sizing: border-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
+/****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
+.bi-single-slider-button .slider-button {
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
+.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;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-slider .bi-slider-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-param-time-interval.time-error .bi-input {
   color: #e85050;
 }
diff --git a/dist/slider.js b/dist/slider.js
index c2b2f9e5a..3f2ab4d33 100644
--- a/dist/slider.js
+++ b/dist/slider.js
@@ -11,7 +11,7 @@ BI.SliderIconButton = BI.inherit(BI.Widget, {
         BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
         this.slider = BI.createWidget({
             type: "bi.icon_button",
-            cls: "widget-slider-icon slider-button",
+            cls: "widget-slider-icon slider-button cursor-drag",
             iconWidth: 14,
             iconHeight: 14,
             height: 14,
diff --git a/dist/widget.css b/dist/widget.css
index 69f5f5394..7a30e6013 100644
--- a/dist/widget.css
+++ b/dist/widget.css
@@ -429,8 +429,38 @@
   box-sizing: border-box;
   /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
+/****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
+.bi-single-slider-button .slider-button {
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
+.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;
+}
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-slider .bi-slider-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-param-time-interval.time-error .bi-input {
   color: #e85050;
 }
diff --git a/src/addons/slider/css/singleslider/slider/widget.slider.css b/src/addons/slider/css/singleslider/slider/widget.slider.css
index f8335347e..38e79e90e 100644
--- a/src/addons/slider/css/singleslider/slider/widget.slider.css
+++ b/src/addons/slider/css/singleslider/slider/widget.slider.css
@@ -1,4 +1,4 @@
-.bi-single-slider-slider .slider-button {
+.bi-single-slider-button .slider-button {
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
diff --git a/src/addons/slider/less/singleslider/slider/widget.slider.less b/src/addons/slider/less/singleslider/slider/widget.slider.less
index 517d61694..2a3a12f0d 100644
--- a/src/addons/slider/less/singleslider/slider/widget.slider.less
+++ b/src/addons/slider/less/singleslider/slider/widget.slider.less
@@ -1,5 +1,5 @@
-@import "../../../../../less/bibase";
-.bi-single-slider-slider{
+@import "../../../bibase";
+.bi-single-slider-button{
   & .slider-button{
     .box-shadow(0 0 10px, rgba(0, 0, 0, 0.2));
     .border-radius(7px);
diff --git a/src/addons/slider/singleslider/button/iconbutton.slider.js b/src/addons/slider/singleslider/button/iconbutton.slider.js
index 63e9f2b18..bd4ea3ee0 100644
--- a/src/addons/slider/singleslider/button/iconbutton.slider.js
+++ b/src/addons/slider/singleslider/button/iconbutton.slider.js
@@ -11,7 +11,7 @@ BI.SliderIconButton = BI.inherit(BI.Widget, {
         BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
         this.slider = BI.createWidget({
             type: "bi.icon_button",
-            cls: "widget-slider-icon slider-button",
+            cls: "widget-slider-icon slider-button cursor-drag",
             iconWidth: 14,
             iconHeight: 14,
             height: 14,
diff --git a/src/less/resource/cursor.less b/src/less/resource/cursor.less
new file mode 100644
index 000000000..bff9b9841
--- /dev/null
+++ b/src/less/resource/cursor.less
@@ -0,0 +1,5 @@
+@import "../var";
+
+.cursor-drag {
+  cursor: url(@sliderDragCursor), auto;
+}
\ No newline at end of file