update

dist/bundle.css

@@ -4123,6 +4123,12 @@ ul.ztree.zTreeDragUL {
   border-radius: 8px;
   background-color: #ffffff;
 }
+.bi-single-slider-button .slider-button:hover,
+.bi-single-slider-button .slider-button.hover {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
 .bi-slider-track .gray-track {
   background-color: #F2F4F7;
   -webkit-border-radius: 3px;

dist/bundle.js

@@ -108521,30 +108521,67 @@ BI.shortcut("bi.sign_text_editor", BI.SignTextEditor);/**
  * Created by zcf on 2016/9/22.
  */
 BI.SliderIconButton = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
+
+    props: {
         baseCls: "bi-single-slider-button"
-        });
     },
-    _init: function () {
-        BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
-        this.slider = BI.createWidget({
-            type: "bi.text_button",
-            cls: "slider-button",
-            height: 12,
-            width: 12
-        });
-        BI.createWidget({
+
+    constants: {
+        LARGE_SIZE: 16,
+        NORMAL_SIZE: 12,
+        LARGE_OFFSET: 4,
+        NORMAL_OFFSET: 6
+    },
+
+    render: function () {
+        var self = this;
+        return {
             type: "bi.absolute",
-            element: this,
+            ref: function () {
+                self.wrapper = this;
+            },
             items: [{
-                el: this.slider,
-                top: 6,
-                left: -6
+                el: {
+                    type: "bi.text_button",
+                    cls: "slider-button",
+                    height: this.constants.NORMAL_SIZE,
+                    width: this.constants.NORMAL_SIZE,
+                    ref: function () {
+                        self.slider = this;
+                    }
+                },
+                top: this.constants.NORMAL_OFFSET,
+                left: -8
             }],
             width: 0,
-            height: 12
+            height: this.constants.NORMAL_SIZE
+        };
+    },
+
+    mounted: function () {
+        var self = this;
+        this.slider.element.hover(function () {
+            self._enlarge();
+        }, function () {
+            self._normalize();
         });
+    },
+
+
+    _enlarge: function () {
+        this.slider.setWidth(this.constants.LARGE_SIZE);
+        this.slider.setHeight(this.constants.LARGE_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.LARGE_OFFSET;
+        this.wrapper.attr("items")[0].left = -10;
+        this.wrapper.resize();
+    },
+
+    _normalize: function () {
+        this.slider.setWidth(this.constants.NORMAL_SIZE);
+        this.slider.setHeight(this.constants.NORMAL_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.NORMAL_OFFSET;
+        this.wrapper.attr("items")[0].left = -8;
+        this.wrapper.resize();
     }
 });
 BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
@@ -108597,6 +108634,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT
         });
+        // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
         sliderVertical.element.click(function (e) {
             if (self.enable && self.isEnabled()) {
                 var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;

dist/fineui.css

@@ -4123,6 +4123,12 @@ ul.ztree.zTreeDragUL {
   border-radius: 8px;
   background-color: #ffffff;
 }
+.bi-single-slider-button .slider-button:hover,
+.bi-single-slider-button .slider-button.hover {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
 .bi-slider-track .gray-track {
   background-color: #F2F4F7;
   -webkit-border-radius: 3px;

dist/fineui.js

@@ -108764,30 +108764,67 @@ BI.shortcut("bi.sign_text_editor", BI.SignTextEditor);/**
  * Created by zcf on 2016/9/22.
  */
 BI.SliderIconButton = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
+
+    props: {
         baseCls: "bi-single-slider-button"
-        });
     },
-    _init: function () {
-        BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
-        this.slider = BI.createWidget({
-            type: "bi.text_button",
-            cls: "slider-button",
-            height: 12,
-            width: 12
-        });
-        BI.createWidget({
+
+    constants: {
+        LARGE_SIZE: 16,
+        NORMAL_SIZE: 12,
+        LARGE_OFFSET: 4,
+        NORMAL_OFFSET: 6
+    },
+
+    render: function () {
+        var self = this;
+        return {
             type: "bi.absolute",
-            element: this,
+            ref: function () {
+                self.wrapper = this;
+            },
             items: [{
-                el: this.slider,
-                top: 6,
-                left: -6
+                el: {
+                    type: "bi.text_button",
+                    cls: "slider-button",
+                    height: this.constants.NORMAL_SIZE,
+                    width: this.constants.NORMAL_SIZE,
+                    ref: function () {
+                        self.slider = this;
+                    }
+                },
+                top: this.constants.NORMAL_OFFSET,
+                left: -8
             }],
             width: 0,
-            height: 12
+            height: this.constants.NORMAL_SIZE
+        };
+    },
+
+    mounted: function () {
+        var self = this;
+        this.slider.element.hover(function () {
+            self._enlarge();
+        }, function () {
+            self._normalize();
         });
+    },
+
+
+    _enlarge: function () {
+        this.slider.setWidth(this.constants.LARGE_SIZE);
+        this.slider.setHeight(this.constants.LARGE_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.LARGE_OFFSET;
+        this.wrapper.attr("items")[0].left = -10;
+        this.wrapper.resize();
+    },
+
+    _normalize: function () {
+        this.slider.setWidth(this.constants.NORMAL_SIZE);
+        this.slider.setHeight(this.constants.NORMAL_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.NORMAL_OFFSET;
+        this.wrapper.attr("items")[0].left = -8;
+        this.wrapper.resize();
     }
 });
 BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
@@ -108840,6 +108877,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT
         });
+        // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
         sliderVertical.element.click(function (e) {
             if (self.enable && self.isEnabled()) {
                 var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;

dist/widget.css

@@ -418,6 +418,12 @@
   border-radius: 8px;
   background-color: #ffffff;
 }
+.bi-single-slider-button .slider-button:hover,
+.bi-single-slider-button .slider-button.hover {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
 .bi-slider-track .gray-track {
   background-color: #F2F4F7;
   -webkit-border-radius: 3px;

dist/widget.js

@@ -20868,30 +20868,67 @@ BI.shortcut("bi.sign_text_editor", BI.SignTextEditor);/**
  * Created by zcf on 2016/9/22.
  */
 BI.SliderIconButton = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
+
+    props: {
         baseCls: "bi-single-slider-button"
-        });
     },
-    _init: function () {
-        BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
-        this.slider = BI.createWidget({
-            type: "bi.text_button",
-            cls: "slider-button",
-            height: 12,
-            width: 12
-        });
-        BI.createWidget({
+
+    constants: {
+        LARGE_SIZE: 16,
+        NORMAL_SIZE: 12,
+        LARGE_OFFSET: 4,
+        NORMAL_OFFSET: 6
+    },
+
+    render: function () {
+        var self = this;
+        return {
             type: "bi.absolute",
-            element: this,
+            ref: function () {
+                self.wrapper = this;
+            },
             items: [{
-                el: this.slider,
-                top: 6,
-                left: -6
+                el: {
+                    type: "bi.text_button",
+                    cls: "slider-button",
+                    height: this.constants.NORMAL_SIZE,
+                    width: this.constants.NORMAL_SIZE,
+                    ref: function () {
+                        self.slider = this;
+                    }
+                },
+                top: this.constants.NORMAL_OFFSET,
+                left: -8
             }],
             width: 0,
-            height: 12
+            height: this.constants.NORMAL_SIZE
+        };
+    },
+
+    mounted: function () {
+        var self = this;
+        this.slider.element.hover(function () {
+            self._enlarge();
+        }, function () {
+            self._normalize();
         });
+    },
+
+
+    _enlarge: function () {
+        this.slider.setWidth(this.constants.LARGE_SIZE);
+        this.slider.setHeight(this.constants.LARGE_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.LARGE_OFFSET;
+        this.wrapper.attr("items")[0].left = -10;
+        this.wrapper.resize();
+    },
+
+    _normalize: function () {
+        this.slider.setWidth(this.constants.NORMAL_SIZE);
+        this.slider.setHeight(this.constants.NORMAL_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.NORMAL_OFFSET;
+        this.wrapper.attr("items")[0].left = -8;
+        this.wrapper.resize();
     }
 });
 BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
@@ -20944,6 +20981,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT
         });
+        // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
         sliderVertical.element.click(function (e) {
             if (self.enable && self.isEnabled()) {
                 var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;

src/css/widget/singleslider/slider/widget.css

@@ -6,3 +6,9 @@
   border-radius: 8px;
   background-color: #ffffff;
 }
+.bi-single-slider-button .slider-button:hover,
+.bi-single-slider-button .slider-button.hover {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}

src/less/widget/singleslider/slider/widget.slider.less

@@ -6,5 +6,8 @@
     border: 2px solid @color-bi-border-highlight;
     .border-radius(8px);
     background-color: @color-bi-background-default;
+    &:hover, &.hover {
+      .border-radius(10px);
+    }
   }
 }

src/widget/singleslider/button/iconbutton.slider.js

@@ -2,30 +2,67 @@
  * Created by zcf on 2016/9/22.
  */
 BI.SliderIconButton = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
+
+    props: {
         baseCls: "bi-single-slider-button"
-        });
     },
-    _init: function () {
-        BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
-        this.slider = BI.createWidget({
-            type: "bi.text_button",
-            cls: "slider-button",
-            height: 12,
-            width: 12
-        });
-        BI.createWidget({
+
+    constants: {
+        LARGE_SIZE: 16,
+        NORMAL_SIZE: 12,
+        LARGE_OFFSET: 4,
+        NORMAL_OFFSET: 6
+    },
+
+    render: function () {
+        var self = this;
+        return {
             type: "bi.absolute",
-            element: this,
+            ref: function () {
+                self.wrapper = this;
+            },
             items: [{
-                el: this.slider,
-                top: 6,
-                left: -6
+                el: {
+                    type: "bi.text_button",
+                    cls: "slider-button",
+                    height: this.constants.NORMAL_SIZE,
+                    width: this.constants.NORMAL_SIZE,
+                    ref: function () {
+                        self.slider = this;
+                    }
+                },
+                top: this.constants.NORMAL_OFFSET,
+                left: -8
             }],
             width: 0,
-            height: 12
+            height: this.constants.NORMAL_SIZE
+        };
+    },
+
+    mounted: function () {
+        var self = this;
+        this.slider.element.hover(function () {
+            self._enlarge();
+        }, function () {
+            self._normalize();
         });
+    },
+
+
+    _enlarge: function () {
+        this.slider.setWidth(this.constants.LARGE_SIZE);
+        this.slider.setHeight(this.constants.LARGE_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.LARGE_OFFSET;
+        this.wrapper.attr("items")[0].left = -10;
+        this.wrapper.resize();
+    },
+
+    _normalize: function () {
+        this.slider.setWidth(this.constants.NORMAL_SIZE);
+        this.slider.setHeight(this.constants.NORMAL_SIZE);
+        this.wrapper.attr("items")[0].top = this.constants.NORMAL_OFFSET;
+        this.wrapper.attr("items")[0].left = -8;
+        this.wrapper.resize();
     }
 });
 BI.shortcut("bi.single_slider_button", BI.SliderIconButton);

src/widget/singleslider/singleslider.js

@@ -48,6 +48,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT
         });
+        // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
         sliderVertical.element.click(function (e) {
             if (self.enable && self.isEnabled()) {
                 var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;