添加单值滑块和区间滑块

demo/css/main.css

@@ -48,3 +48,44 @@ body {
 .demo-editor {
   border: 1px solid #cccccc;
 }
+.bi-slider-track .background-track {
+  background-color: rgba(153, 153, 153, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999, 99, endColorstr=#33999999, 99);
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+.bi-slider-track .gray-track {
+  background: #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-single-slider-slider {
+  cursor: url('http://img5.imgtn.bdimg.com/it/u=1821811235,1515479556&fm=26&gp=0.jpg'), auto;
+}
+.widget-slider-icon .x-icon {
+  display: block;
+  background: url('icon/slider.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon:hover .x-icon,
+.widget-slider-icon:focus .x-icon,
+.widget-slider-icon.hover .x-icon {
+  display: block;
+  background: url('icon/slider.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon.native .x-icon,
+.widget-slider-icon.disabled .x-icon {
+  display: block;
+}

demo/js/config/widget.js

@@ -75,6 +75,10 @@ Demo.WIDGET_CONFIG = [{
         pId: 406,
         text: "bi.search_editor",
         value: "demo.search_editor"
+    }, {
+        pId: 406,
+        text: "bi.sign_editor",
+        value: "demo.sign_editor"
     }, {
         pId: 406,
         text: "bi.sign_initial_editor",
@@ -245,5 +249,21 @@ Demo.WIDGET_CONFIG = [{
         pId: 418,
         text: "bi.dialog",
         value: "demo.dialog"
+    }, {
+        pId: 4,
+        id: 419,
+        text: "单值滑块"
+    }, {
+        pId: 419,
+        text: "bi.single_slider",
+        value: "demo.single_slider"
+    },{
+        pId: 4,
+        id: 420,
+        text: "区间滑块"
+    }, {
+        pId: 420,
+        text: "bi.interval_slider",
+        value: "demo.interval_slider"
     },
 ];

demo/js/widget/editor/demo.clear_editor.js

@@ -10,7 +10,7 @@ Demo.ClearEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.clear_editor",
-                cls: "demo-editor",
+                cls: "bi-border",
                 width: 300,
                 watermark: "这个是带清除按钮的"
             }],

demo/js/widget/editor/demo.record_editor.js

@@ -10,7 +10,7 @@ Demo.RecordEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.record_editor",
-                cls: "demo-editor",
+                cls: "bi-border",
                 width: 300,
                 watermark: "这个是可以记录输入的"
             }],

demo/js/widget/editor/demo.shelter_editor.js

@@ -11,7 +11,7 @@ Demo.ClearEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.shelter_editor",
-                cls: "editor",
+                cls: "bi-border",
                 ref:function(_ref){
                     editor=_ref;
                 },

demo/js/widget/editor/demo.sign_editor.js

@@ -0,0 +1,24 @@
+/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.SignEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.sign_editor",
+                //  cls:"layout-bg5",
+                value: "123",
+                text: "456",
+                width: 300
+            }],
+            vgap: 20
+
+        }
+    }
+})
+
+BI.shortcut("demo.sign_editor", Demo.SignEditor);

demo/js/widget/editor/demo.state_editor.js

@@ -10,7 +10,7 @@ Demo.StateEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_adapt",
             items: [{
                 type: "bi.state_editor",
-                cls:"editor",
+                cls:"bi-border",
                 value:"123",
                 text:"456",
                 width: 300

demo/js/widget/intervalslider/demo.interval_slider.js

@@ -0,0 +1,51 @@
+/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.IntervalSlider = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.interval_slider",
+                ref: function (_ref) {
+                    self.slider = _ref;
+                },
+                width: 300,
+                height: 90
+            }, {
+                type: "bi.button",
+                text: "populate",
+                handler: function () {
+                    self.slider.setMinAndMax({
+                        min: 1,
+                        max: 100
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "setValue",
+                handler: function () {
+
+                    //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
+                    self.slider.setValue({
+                        min: 20,
+                        max: 80
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.interval_slider", Demo.IntervalSlider);

demo/js/widget/singleslider/demo.single_slider.js

@@ -0,0 +1,48 @@
+/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.SingleSlider = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.single_slider",
+                ref: function (_ref) {
+                    self.slider = _ref;
+                },
+                width: 300,
+                height: 50
+            }, {
+                type: "bi.button",
+                text: "populate",
+                handler: function () {
+                    self.slider.setMinAndMax({
+                        min: 1,
+                        max: 100
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "setValue",
+                handler: function () {
+
+                    //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
+                    self.slider.setValue(50);
+                    self.slider.populate();
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.single_slider", Demo.SingleSlider);

demo/less/main.less

@@ -65,3 +65,48 @@ body {
 .demo-editor{
   border: 1px solid rgb(204, 204, 204);
 }
+
+.bi-slider-track .background-track {
+  background-color: rgba(153, 153, 153, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999,endColorstr=#33999999);
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+.bi-slider-track .gray-track {
+  background: #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-single-slider-slider {
+  cursor: url('http://img5.imgtn.bdimg.com/it/u=1821811235,1515479556&fm=26&gp=0.jpg'), auto;
+}
+
+.widget-slider-icon .x-icon {
+  display: block;
+  background: url('./icon/slider.png') no-repeat 0 0 ;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
+  _background: none;
+  background-size: 100% 100%;
+  //background-position:center center;
+}
+.widget-slider-icon:hover .x-icon,
+.widget-slider-icon:focus .x-icon,
+.widget-slider-icon.hover .x-icon {
+  display: block;
+  background: url('./icon/slider.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+   background-size: 100% 100%;
+  // background-position:center center;
+}
+.widget-slider-icon.native .x-icon,
+.widget-slider-icon.disabled .x-icon {
+  display: block;
+}

docs/demo.css

@@ -51,6 +51,47 @@ body {
 .demo-editor {
   border: 1px solid #cccccc;
 }
+.bi-slider-track .background-track {
+  background-color: rgba(153, 153, 153, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33999999, 99, endColorstr=#33999999, 99);
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+.bi-slider-track .gray-track {
+  background: #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.bi-single-slider-slider {
+  cursor: url('http://img5.imgtn.bdimg.com/it/u=1821811235,1515479556&fm=26&gp=0.jpg'), auto;
+}
+.widget-slider-icon .x-icon {
+  display: block;
+  background: url('icon/slider.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-normal.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon:hover .x-icon,
+.widget-slider-icon:focus .x-icon,
+.widget-slider-icon.hover .x-icon {
+  display: block;
+  background: url('icon/slider.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${remoteServletURL}?op=resource&resource=/com/fr/bi/web/images/icon/slider-active.png');
+  _background: none;
+  background-size: 100% 100%;
+}
+.widget-slider-icon.native .x-icon,
+.widget-slider-icon.disabled .x-icon {
+  display: block;
+}
 .demo-north {
   background-color: #3c8dbc;
 }

docs/demo.js

@@ -3414,6 +3414,10 @@ Demo.COMPONENT_CONFIG = [{
         pId: 406,
         text: "bi.search_editor",
         value: "demo.search_editor"
+    }, {
+        pId: 406,
+        text: "bi.sign_editor",
+        value: "demo.sign_editor"
     }, {
         pId: 406,
         text: "bi.sign_initial_editor",
@@ -3584,6 +3588,22 @@ Demo.COMPONENT_CONFIG = [{
         pId: 418,
         text: "bi.dialog",
         value: "demo.dialog"
+    }, {
+        pId: 4,
+        id: 419,
+        text: "单值滑块"
+    }, {
+        pId: 419,
+        text: "bi.single_slider",
+        value: "demo.single_slider"
+    },{
+        pId: 4,
+        id: 420,
+        text: "区间滑块"
+    }, {
+        pId: 420,
+        text: "bi.interval_slider",
+        value: "demo.interval_slider"
     },
 ];Demo.Func = BI.inherit(BI.Widget, {
     props: {
@@ -6823,7 +6843,7 @@ Demo.ClearEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.clear_editor",
-                cls: "demo-editor",
+                cls: "bi-border",
                 width: 300,
                 watermark: "这个是带清除按钮的"
             }],
@@ -6844,7 +6864,7 @@ Demo.RecordEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.record_editor",
-                cls: "demo-editor",
+                cls: "bi-border",
                 width: 300,
                 watermark: "这个是可以记录输入的"
             }],
@@ -6894,7 +6914,7 @@ Demo.ClearEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.shelter_editor",
-                cls: "editor",
+                cls: "bi-border",
                 ref:function(_ref){
                     editor=_ref;
                 },
@@ -6922,6 +6942,29 @@ Demo.ClearEditor = BI.inherit(BI.Widget, {
 })
 
 BI.shortcut("demo.shelter_editor", Demo.ClearEditor);/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.SignEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+    render: function () {
+        return {
+            type: "bi.horizontal_adapt",
+            items: [{
+                type: "bi.sign_editor",
+                //  cls:"layout-bg5",
+                value: "123",
+                text: "456",
+                width: 300
+            }],
+            vgap: 20
+
+        }
+    }
+})
+
+BI.shortcut("demo.sign_editor", Demo.SignEditor);/**
  * Created by Dailer on 2017/7/11.
  */
 Demo.SignInitialEditor = BI.inherit(BI.Widget, {
@@ -6977,7 +7020,7 @@ Demo.StateEditor = BI.inherit(BI.Widget, {
             type: "bi.horizontal_adapt",
             items: [{
                 type: "bi.state_editor",
-                cls:"editor",
+                cls:"bi-border",
                 value:"123",
                 text:"456",
                 width: 300
@@ -7016,6 +7059,53 @@ Demo.TextEditor = BI.inherit(BI.Widget, {
 })
 
 BI.shortcut("demo.text_editor", Demo.TextEditor);/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.IntervalSlider = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.interval_slider",
+                ref: function (_ref) {
+                    self.slider = _ref;
+                },
+                width: 300,
+                height:90
+            }, {
+                type: "bi.button",
+                text: "populate",
+                handler: function () {
+                    self.slider.setMinAndMax({
+                        min: 1,
+                        max: 100
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "setValue",
+                handler: function () {
+
+                    //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
+                    self.slider.setValue({min:20,max:80});
+                    self.slider.populate();
+                },
+                width: 300
+            }],
+            vgap:20
+        }
+    }
+})
+
+BI.shortcut("demo.interval_slider", Demo.IntervalSlider);/**
  * Created by Dailer on 2017/7/11.
  */
 Demo.Month = BI.inherit(BI.Widget, {
@@ -7750,6 +7840,53 @@ Demo.SelectTreeCombo = BI.inherit(BI.Widget, {
 })
 
 BI.shortcut("demo.select_tree_combo", Demo.SelectTreeCombo);/**
+ * Created by Dailer on 2017/7/14.
+ */
+Demo.SingleSlider = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: ""
+    },
+
+    render: function () {
+        var self = this;
+
+        return {
+            type: "bi.horizontal_auto",
+            items: [{
+                type: "bi.single_slider",
+                ref: function (_ref) {
+                    self.slider = _ref;
+                },
+                width: 300,
+                height: 50
+            }, {
+                type: "bi.button",
+                text: "populate",
+                handler: function () {
+                    self.slider.setMinAndMax({
+                        min: 1,
+                        max: 100
+                    });
+                    self.slider.populate();
+                },
+                width: 300
+            }, {
+                type: "bi.button",
+                text: "setValue",
+                handler: function () {
+
+                    //既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
+                    self.slider.setValue(50);
+                    self.slider.populate();
+                },
+                width: 300
+            }],
+            vgap: 20
+        }
+    }
+})
+
+BI.shortcut("demo.single_slider", Demo.SingleSlider);/**
  * Created by Dailer on 2017/7/13.
  */
 Demo.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {

docs/index.html

@@ -1,33 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title></title>
 
-    <link rel="stylesheet" type="text/css"
+<head>
-          href="core.css"/>
+      <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css"
+      <title></title>
-          href="base.css"/>
+      <link rel="stylesheet" type="text/css" href="core.css" />
-    <link rel="stylesheet" type="text/css"
+      <link rel="stylesheet" type="text/css" href="base.css" />
-          href="widget.css"/>
+      <link rel="stylesheet" type="text/css" href="widget.css" />
-    <link rel="stylesheet" type="text/css"
+      <link rel="stylesheet" type="text/css" href="resource.css" />
-          href="resource.css"/>
+      <link rel="stylesheet" type="text/css" href="demo.css" />
-    <link rel="stylesheet" type="text/css"
-          href="demo.css"/>
 
-    <script src="polyfill.js"></script>
+      <script src="polyfill.js"></script>
-    <script src="core.js"></script>
+      <script src="core.js"></script>
-    <script src="base.js"></script>
+      <script src="base.js"></script>
-    <script src="case.js"></script>
+      <script src="case.js"></script>
-    <script src="widget.js"></script>
+      <script src="widget.js"></script>
-    <!--图表-->
+      <!--图表-->
-    <script src="vancharts-all.js"></script>
+      <script src="vancharts-all.js"></script>
-    <script src="biconst.js"></script><!--图表用到的常量(直接拿的bi的常量)-->
+      <script src="biconst.js"></script>
-    <script src="chart.js"></script>
+      <!--图表用到的常量(直接拿的bi的常量)-->
+      <script src="chart.js"></script>
 
-    <script src="demo.js"></script>
+      <script src="demo.js"></script>
 </head>
+
 <body>
-<div id="wrapper"></div>
+      <div id="wrapper"></div>
 </body>
+
 </html>

src/less/resource/icon.less

@@ -55,3 +55,5 @@
 //Half Select
 .icon(check-half-select-icon, @icon-half-select);
 
+
+

src/less/widget/singleslider/singleslider.less

@@ -0,0 +1,6 @@
+@import "../../bibase";
+
+.bi-single-slider {
+  & .slider-editor-button {
+  }
+}

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

@@ -0,0 +1,4 @@
+@import "../../../bibase";
+.bi-single-slider-slider{
+  cursor: url('@{leftRightCursor}'), auto;
+}

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

@@ -0,0 +1,15 @@
+@import "../../../bibase";
+
+.bi-slider-track {
+  .background-track {
+    .background-color(@color-bi-background-gray, 0);
+    .border-radius(12px);
+  }
+  .gray-track {
+    background: @color-bi-background-disabled;
+    .border-radius(4px);
+  }
+  .blue-track {
+    .border-radius(4px);
+  }
+}

src/widget/intervalslider/intervalslider.js

@@ -0,0 +1,444 @@
+/**
+ * Created by zcf on 2016/9/26.
+ */
+BI.IntervalSlider = BI.inherit(BI.Widget, {
+    _constant: {
+        EDITOR_WIDTH: 58,
+        EDITOR_R_GAP: 60,
+        EDITOR_HEIGHT: 30,
+        HEIGHT: 28,
+        SLIDER_WIDTH_HALF: 15,
+        SLIDER_WIDTH: 30,
+        SLIDER_HEIGHT: 30,
+        TRACK_HEIGHT: 24
+    },
+
+    _defaultConfig: function () {
+        return BI.extend(BI.IntervalSlider.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider bi-slider-track"
+        })
+    },
+
+    _init: function () {
+        BI.IntervalSlider.superclass._init.apply(this, arguments);
+
+        var self = this;
+        var c = this._constant;
+        this.enable = false;
+        this.valueOne = "";
+        this.valueTwo = "";
+        this.calculation = new BI.AccurateCalculationModel();
+
+        this.backgroundTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "background-track",
+            height: c.TRACK_HEIGHT
+        });
+        this.grayTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "gray-track",
+            height: 8
+        });
+        this.blueTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "blue-track bi-high-light-background",
+            height: 8
+        });
+        this.track = this._createTrackWrapper();
+
+        this.labelOne = BI.createWidget({
+            type: "bi.sign_editor",
+            cls: "slider-editor-button bi-border",
+            errorText: "",
+            allowBlank: false,
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH,
+            validationChecker: function (v) {
+                return self._checkValidation(v);
+            }
+        });
+        this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () {
+            var v = BI.parseFloat(this.getValue());
+            self.valueOne = v;
+            var percent = self._getPercentByValue(v);
+            var significantPercent = BI.parseFloat(percent.toFixed(1));//分成1000份
+            self._setLabelOnePosition(significantPercent);
+            self._setSliderOnePosition(significantPercent);
+            self._setBlueTrack();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        });
+
+        this.labelTwo = BI.createWidget({
+            type: "bi.sign_editor",
+            cls: "slider-editor-button bi-border",
+            errorText: "",
+            allowBlank: false,
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH,
+            validationChecker: function (v) {
+                return self._checkValidation(v);
+            }
+        });
+        this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () {
+            var v = BI.parseFloat(this.getValue());
+            self.valueTwo = v;
+            var percent = self._getPercentByValue(v);
+            var significantPercent = BI.parseFloat(percent.toFixed(1));
+            self._setLabelTwoPosition(significantPercent);
+            self._setSliderTwoPosition(significantPercent);
+            self._setBlueTrack();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        });
+
+        this.sliderOne = BI.createWidget({
+            type: "bi.single_slider_slider"
+        });
+        this.sliderOne.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setLabelOnePosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.labelOne.setValue(v);
+                self.valueOne = v;
+                self._setBlueTrack();
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderOnePosition(significantPercent);
+                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+            }
+        });
+
+        this.sliderTwo = BI.createWidget({
+            type: "bi.single_slider_slider"
+        });
+        this.sliderTwo.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setLabelTwoPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.labelTwo.setValue(v);
+                self.valueTwo = v;
+                self._setBlueTrack();
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderTwoPosition(significantPercent);
+                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+            }
+        });
+        this._setVisible(false);
+
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.track,
+                            width: "100%",
+                            height: c.TRACK_HEIGHT
+                        }]
+                    }],
+                    hgap: 7,
+                    height: c.TRACK_HEIGHT
+                },
+                top: 33,
+                left: 0,
+                width: "100%"
+            },
+                this._createLabelWrapper(),
+                this._createSliderWrapper()
+            ]
+        })
+    },
+
+    _createLabelWrapper: function () {
+        var c = this._constant;
+        return {
+            el: {
+                type: "bi.vertical",
+                items: [{
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.labelOne,
+                        top: 0,
+                        left: "0%"
+                    }]
+                }, {
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.labelTwo,
+                        top: 0,
+                        left: "100%"
+                    }]
+                }],
+                rgap: c.EDITOR_R_GAP,
+                height: 90
+            },
+            top: 0,
+            left: 0,
+            width: "100%"
+        }
+    },
+
+    _createSliderWrapper: function () {
+        var c = this._constant;
+        return {
+            el: {
+                type: "bi.vertical",
+                items: [{
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.sliderOne,
+                        top: 0,
+                        left: "0%"
+                    }]
+                }, {
+                    type: "bi.absolute",
+                    items: [{
+                        el: this.sliderTwo,
+                        top: 0,
+                        left: "100%"
+                    }]
+                }],
+                hgap: c.SLIDER_WIDTH_HALF,
+                height: c.SLIDER_HEIGHT
+            },
+            top: 30,
+            left: 0,
+            width: "100%"
+        }
+    },
+
+    _createTrackWrapper: function () {
+        return BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: this.backgroundTrack,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            width: "100%"
+                        }, {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            width: "0%"
+                        }]
+                    }],
+                    hgap: 8,
+                    height: 8
+                },
+                top: 8,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _checkValidation: function (v) {
+        return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
+    },
+
+    _checkOverlap: function () {
+        var labelOneLeft = this.labelOne.element[0].offsetLeft;
+        var labelTwoLeft = this.labelTwo.element[0].offsetLeft;
+        if (labelOneLeft <= labelTwoLeft) {
+            if ((labelTwoLeft - labelOneLeft) < 90) {
+                this.labelTwo.element.css({"top": 60});
+            } else {
+                this.labelTwo.element.css({"top": 0});
+            }
+        } else {
+            if ((labelOneLeft - labelTwoLeft) < 90) {
+                this.labelTwo.element.css({"top": 60});
+            } else {
+                this.labelTwo.element.css({"top": 0});
+            }
+        }
+    },
+
+    _setLabelOnePosition: function (percent) {
+        this.labelOne.element.css({"left": percent + "%"});
+        this._checkOverlap();
+    },
+
+    _setLabelTwoPosition: function (percent) {
+        this.labelTwo.element.css({"left": percent + "%"});
+        this._checkOverlap();
+    },
+
+    _setSliderOnePosition: function (percent) {
+        this.sliderOne.element.css({"left": percent + "%"});
+    },
+
+    _setSliderTwoPosition: function (percent) {
+        this.sliderTwo.element.css({"left": percent + "%"});
+    },
+
+    _setBlueTrackLeft: function (percent) {
+        this.blueTrack.element.css({"left": percent + "%"});
+    },
+
+    _setBlueTrackWidth: function (percent) {
+        this.blueTrack.element.css({"width": percent + "%"});
+    },
+
+    _setBlueTrack: function () {
+        var percentOne = this._getPercentByValue(this.labelOne.getValue());
+        var percentTwo = this._getPercentByValue(this.labelTwo.getValue());
+        if (percentOne <= percentTwo) {
+            this._setBlueTrackLeft(percentOne);
+            this._setBlueTrackWidth(percentTwo - percentOne);
+        } else {
+            this._setBlueTrackLeft(percentTwo);
+            this._setBlueTrackWidth(percentOne - percentTwo);
+        }
+    },
+
+    _setAllPosition: function (one, two) {
+        this._setSliderOnePosition(one);
+        this._setLabelOnePosition(one);
+        this._setSliderTwoPosition(two);
+        this._setLabelTwoPosition(two);
+        this._setBlueTrack();
+    },
+
+    _setVisible: function (visible) {
+        this.sliderOne.setVisible(visible);
+        this.sliderTwo.setVisible(visible);
+        this.labelOne.setVisible(visible);
+        this.labelTwo.setVisible(visible);
+    },
+
+    _setErrorText: function () {
+        var errorText = BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number");
+        this.labelOne.setErrorText(errorText);
+        this.labelTwo.setErrorText(errorText);
+    },
+
+    _getGrayTrackLength: function () {
+        return this.grayTrack.element[0].scrollWidth
+    },
+
+    //其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
+    _getValueByPercent: function (percent) {//return (((max-min)*percent)/100+min)
+        var sub = this.calculation.accurateSubtraction(this.max, this.min);
+        var mul = this.calculation.accurateMultiplication(sub, percent);
+        var div = this.calculation.accurateDivisionTenExponent(mul, 2);
+        return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision));
+    },
+
+    _getPercentByValue: function (v) {
+        return (v - this.min) * 100 / (this.max - this.min);
+    },
+
+    _setDraggableEnable: function (enable) {
+        if (enable) {
+            this.sliderOne.element.draggable("enable");
+            this.sliderTwo.element.draggable("enable")
+        } else {
+            this.sliderOne.element.draggable("disable");
+            this.sliderTwo.element.draggable("disable")
+        }
+    },
+
+    getValue: function () {
+        if (this.valueOne <= this.valueTwo) {
+            return {min: this.valueOne, max: this.valueTwo}
+        } else {
+            return {min: this.valueTwo, max: this.valueOne}
+        }
+    },
+
+    setMinAndMax: function (v) {
+        var minNumber = BI.parseFloat(v.min);
+        var maxNumber = BI.parseFloat(v.max);
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber )) {
+            this.min = minNumber;
+            this.max = maxNumber;
+            this.valueOne = minNumber;
+            this.valueTwo = maxNumber;
+            //计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
+            //如果差值的整数位数大于4,toPrecision得到的是科学计数法1234 => 1.2e+3
+            var sub = this.calculation.accurateSubtraction(this.max, this.min);
+            var pre = sub.toPrecision(4);
+            var precisionString = pre.indexOf("e") > -1 ? (BI.parseFloat(sub.toPrecision(4)) + "") : pre;
+            var arr = precisionString.split(".");
+            this.precision = arr.length > 1 ? arr[1] : 0;
+            this._setDraggableEnable(true);
+        }
+        if (maxNumber === minNumber) {
+            this._setDraggableEnable(false);
+        }
+    },
+
+    setValue: function (v) {
+        var valueOne = BI.parseFloat(v.min);
+        var valueTwo = BI.parseFloat(v.max);
+        if (!isNaN(valueOne) && !isNaN(valueTwo)) {
+            if (this._checkValidation(valueOne)) {
+                this.valueOne = valueOne;
+            }
+            if (this._checkValidation(valueTwo)) {
+                this.valueTwo = valueTwo;
+            }
+            if (valueOne < this.min) {
+                this.valueOne = this.min;
+            }
+            if (valueTwo > this.max) {
+                this.valueTwo = this.max;
+            }
+        }
+    },
+
+    reset: function () {
+        this._setVisible(false);
+        this.enable = false;
+        this.valueOne = "";
+        this.valueTwo = "";
+        this.min = NaN;
+        this.max = NaN;
+        this._setBlueTrackWidth(0);
+    },
+
+    populate: function () {
+        if (!isNaN(this.min) && !isNaN(this.max)) {
+            this.enable = true;
+            this._setVisible(true);
+            this._setErrorText();
+            if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) {
+                this.labelOne.setValue(this.valueOne);
+                this.labelTwo.setValue(this.valueTwo);
+                this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo));
+            } else {
+                this.labelOne.setValue(this.min);
+                this.labelTwo.setValue(this.max);
+                this._setAllPosition(0, 100)
+            }
+        }
+    }
+});
+BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.interval_slider", BI.IntervalSlider);

src/widget/intervalslider/model.accuratecalculation.js

@@ -0,0 +1,222 @@
+/**
+ * Created by zcf on 2017/3/1.
+ * 万恶的IEEE-754
+ * 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数
+ */
+BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: ""
+        })
+    },
+
+    _init: function () {
+        BI.AccurateCalculationModel.superclass._init.apply(this, arguments);
+    },
+
+    _getMagnitude: function (n) {
+        var magnitude = "1";
+        for (var i = 0; i < n; i++) {
+            magnitude += "0";
+        }
+        return BI.parseInt(magnitude);
+    },
+
+    _formatDecimal: function (stringNumber1, stringNumber2) {
+        if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) {
+            return;
+        }
+        var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
+        if (magnitudeDiff > 0) {
+            var needAddZero = stringNumber2
+        } else {
+            var needAddZero = stringNumber1;
+            magnitudeDiff = (0 - magnitudeDiff);
+        }
+        for (var i = 0; i < magnitudeDiff; i++) {
+            if (needAddZero.numDecimal === "0" && i === 0) {
+                continue
+            }
+            needAddZero.numDecimal += "0"
+        }
+    },
+
+    _stringNumberFactory: function (num) {
+        var strNum = num.toString();
+        var numStrArray = strNum.split(".");
+        var numInteger = numStrArray[0];
+        if (numStrArray.length === 1) {
+            var numDecimal = "0";
+            var numDecimalLength = 0;
+        } else {
+            var numDecimal = numStrArray[1];
+            var numDecimalLength = numStrArray[1].length;
+        }
+        return {
+            "numInteger": numInteger,
+            "numDecimal": numDecimal,
+            "numDecimalLength": numDecimalLength
+        }
+    },
+
+    _accurateSubtraction: function (num1, num2) {//num1-num2 && num1>num2
+        var stringNumber1 = this._stringNumberFactory(num1);
+        var stringNumber2 = this._stringNumberFactory(num2);
+        //整数部分计算
+        var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger);
+        //小数部分
+        this._formatDecimal(stringNumber1, stringNumber2);
+        var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2);
+
+        if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) {
+            var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
+            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        } else {//否则借位
+            integerResult--;
+            var borrow = this._getMagnitude(decimalMaxLength);
+            var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
+            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        }
+        var result = integerResult + "." + decimalResult;
+        return BI.parseFloat(result);
+
+        function getDecimalMaxLength(num1, num2) {
+            if (num1.numDecimal.length >= num2.numDecimal.length) {
+                return num1.numDecimal.length
+            }
+            return num2.numDecimal.length
+        }
+
+        function addZero(resultTemp, length) {
+            var diff = length - resultTemp.length;
+            for (var i = 0; i < diff; i++) {
+                resultTemp = "0" + resultTemp;
+            }
+            return resultTemp
+        }
+    },
+
+    _accurateAddition: function (num1, num2) {//加法结合律
+        var stringNumber1 = this._stringNumberFactory(num1);
+        var stringNumber2 = this._stringNumberFactory(num2);
+        //整数部分计算
+        var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger);
+        //小数部分
+        this._formatDecimal(stringNumber1, stringNumber2);
+
+        var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString();
+
+        if (decimalResult !== "0") {
+            if (decimalResult.length <= stringNumber1.numDecimal.length) {
+                decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length)
+            } else {
+                integerResult++;//进一
+                decimalResult = decimalResult.slice(1);
+            }
+        }
+        var result = integerResult + "." + decimalResult;
+        return BI.parseFloat(result);
+
+        function addZero(resultTemp, length) {
+            var diff = length - resultTemp.length;
+            for (var i = 0; i < diff; i++) {
+                resultTemp = "0" + resultTemp;
+            }
+            return resultTemp
+        }
+    },
+
+    _accurateMultiplication: function (num1, num2) {//乘法分配律
+        var stringNumber1 = this._stringNumberFactory(num1);
+        var stringNumber2 = this._stringNumberFactory(num2);
+        //整数部分计算
+        var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger);
+        //num1的小数和num2的整数
+        var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength);
+        //num1的整数和num2的小数
+        var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength);
+        //小数*小数
+        var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength));
+
+        return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2);
+    },
+
+    _accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
+        var stringNumber = this._stringNumberFactory(num);
+        if (stringNumber.numInteger.length > n) {
+            var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n));
+            var partDecimalResult = stringNumber.numInteger.slice(-n);
+        } else {
+            var integerResult = "0";
+            var partDecimalResult = addZero(stringNumber.numInteger, n);
+        }
+        var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal;
+        return BI.parseFloat(result);
+
+        function addZero(resultTemp, length) {
+            var diff = length - resultTemp.length;
+            for (var i = 0; i < diff; i++) {
+                resultTemp = "0" + resultTemp;
+            }
+            return resultTemp
+        }
+    },
+
+    accurateSubtraction: function (num1, num2) {
+        if (num1 >= 0 && num2 >= 0) {
+            if (num1 >= num2) {
+                return this._accurateSubtraction(num1, num2)
+            }
+            return -this._accurateSubtraction(num2, num1)
+        }
+        if (num1 >= 0 && num2 < 0) {
+            return this._accurateAddition(num1, -num2)
+        }
+        if (num1 < 0 && num2 >= 0) {
+            return -this._accurateAddition(-num1, num2)
+        }
+        if (num1 < 0 && num2 < 0) {
+            if (num1 >= num2) {
+                return this._accurateSubtraction(-num2, -num1)
+            }
+            return this._accurateSubtraction(-num1, -num2)
+        }
+    },
+
+    accurateAddition: function (num1, num2) {
+        if (num1 >= 0 && num2 >= 0) {
+            return this._accurateAddition(num1, num2)
+        }
+        if (num1 >= 0 && num2 < 0) {
+            return this.accurateSubtraction(num1, -num2)
+        }
+        if (num1 < 0 && num2 >= 0) {
+            return this.accurateSubtraction(num2, -num1)
+        }
+        if (num1 < 0 && num2 < 0) {
+            return -this._accurateAddition(-num1, -num2)
+        }
+    },
+
+    accurateMultiplication: function (num1, num2) {
+        if (num1 >= 0 && num2 >= 0) {
+            return this._accurateMultiplication(num1, num2)
+        }
+        if (num1 >= 0 && num2 < 0) {
+            return -this._accurateMultiplication(num1, -num2)
+        }
+        if (num1 < 0 && num2 >= 0) {
+            return -this._accurateMultiplication(-num1, num2)
+        }
+        if (num1 < 0 && num2 < 0) {
+            return this._accurateMultiplication(-num1, -num2)
+        }
+    },
+
+    accurateDivisionTenExponent: function (num1, n) {
+        if (num1 >= 0) {
+            return this._accurateDivisionTenExponent(num1, n);
+        }
+        return -this._accurateDivisionTenExponent(-num1, n);
+    }
+});

src/widget/singleslider1/singleslider.js

@@ -0,0 +1,287 @@
+/**
+ * Created by zcf on 2016/9/22.
+ */
+BI.SingleSlider = BI.inherit(BI.Widget, {
+    _constant: {
+        EDITOR_WIDTH: 60,
+        EDITOR_HEIGHT: 30,
+        HEIGHT: 28,
+        SLIDER_WIDTH_HALF: 15,
+        SLIDER_WIDTH: 30,
+        SLIDER_HEIGHT: 30,
+        TRACK_HEIGHT: 24
+    },
+    _defaultConfig: function () {
+        return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider bi-slider-track"
+        });
+    },
+    _init: function () {
+        BI.SingleSlider.superclass._init.apply(this, arguments);
+
+        var self = this;
+        var c = this._constant;
+        this.enable = false;
+        this.value = "";
+
+        this.backgroundTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "background-track bi-background",
+            height: c.TRACK_HEIGHT
+        });
+        this.grayTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "gray-track",
+            height: 8
+        });
+        this.blueTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "blue-track bi-high-light-background",
+            height: 8
+        });
+        this.track = this._createTrackWrapper();
+
+        this.slider = BI.createWidget({
+            type: "bi.single_slider_slider"
+        });
+        this.slider.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.label.setValue(v);
+                self.value = v;
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        });
+        var sliderVertical = BI.createWidget({
+            type: "bi.vertical",
+            items: [{
+                type: "bi.absolute",
+                items: [this.slider]
+            }],
+            hgap: c.SLIDER_WIDTH_HALF,
+            height: c.SLIDER_HEIGHT
+        });
+        sliderVertical.element.click(function (e) {
+            if (self.enable) {
+                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                var trackLength = self.track.element[0].scrollWidth;
+                var percent = 0;
+                if (offset < 0) {
+                    percent = 0
+                }
+                if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
+                    percent = offset * 100 / self._getGrayTrackLength();
+                }
+                if (offset > (trackLength - c.SLIDER_WIDTH)) {
+                    percent = 100
+                }
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setAllPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        });
+        this.label = BI.createWidget({
+            type: "bi.sign_editor",
+            cls: "slider-editor-button bi-border",
+            errorText: "",
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH,
+            allowBlank: false,
+            validationChecker: function (v) {
+                return self._checkValidation(v);
+            },
+            quitChecker: function (v) {
+                return self._checkValidation(v);
+            }
+        });
+        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
+            var percent = self._getPercentByValue(this.getValue());
+            var significantPercent = BI.parseFloat(percent.toFixed(1));
+            self._setAllPosition(significantPercent);
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        });
+        this._setVisible(false);
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.track,
+                            width: "100%",
+                            height: c.TRACK_HEIGHT
+                        }]
+                    }],
+                    hgap: 7,
+                    height: c.TRACK_HEIGHT
+                },
+                top: 33,
+                left: 0,
+                width: "100%"
+            }, {
+                el: sliderVertical,
+                top: 30,
+                left: 0,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [this.label]
+                    }],
+                    rgap: c.EDITOR_WIDTH/2,
+                    height: c.EDITOR_HEIGHT
+                },
+                top: 0,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _createTrackWrapper: function () {
+        return BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: this.backgroundTrack,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            width: "100%"
+                        }, {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            width: "0%"
+                        }]
+                    }],
+                    hgap: 8,
+                    height: 8
+                },
+                top: 8,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _checkValidation: function (v) {
+        return !(BI.isNull(v) || v < this.min || v > this.max)
+    },
+
+    _setBlueTrack: function (percent) {
+        this.blueTrack.element.css({"width": percent + "%"});
+    },
+
+    _setLabelPosition: function (percent) {
+        this.label.element.css({"left": percent + "%"});
+    },
+
+    _setSliderPosition: function (percent) {
+        this.slider.element.css({"left": percent + "%"});
+    },
+
+    _setAllPosition: function (percent) {
+        this._setSliderPosition(percent);
+        this._setLabelPosition(percent);
+        this._setBlueTrack(percent);
+    },
+
+    _setVisible: function (visible) {
+        this.slider.setVisible(visible);
+        this.label.setVisible(visible);
+    },
+
+    _getGrayTrackLength: function () {
+        return this.grayTrack.element[0].scrollWidth
+    },
+
+    _getValueByPercent: function (percent) {
+        var thousandth = BI.parseInt(percent * 10);
+        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+    },
+
+    _getPercentByValue: function (v) {
+        return (v - this.min) * 100 / (this.max - this.min);
+    },
+
+    getValue: function () {
+        return this.value;
+    },
+
+    setValue: function (v) {
+        var value = BI.parseFloat(v);
+        if ((!isNaN(value))) {
+            if (this._checkValidation(value)) {
+                this.value = value;
+            }
+            if (value > this.max) {
+                this.value = this.max;
+            }
+            if (value < this.min) {
+                this.value = this.min;
+            }
+        }
+    },
+
+    setMinAndMax: function (v) {
+        var minNumber = BI.parseFloat(v.min);
+        var maxNumber = BI.parseFloat(v.max);
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+            this.min = minNumber;
+            this.max = maxNumber;
+        }
+    },
+
+    reset: function () {
+        this._setVisible(false);
+        this.enable = false;
+        this.value = "";
+        this.min = 0;
+        this.max = 0;
+        this._setBlueTrack(0);
+    },
+
+    populate: function () {
+        if (!isNaN(this.min) && !isNaN(this.max)) {
+            this._setVisible(true);
+            this.enable = true;
+            this.label.setErrorText(BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number"));
+            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+                this.label.setValue(this.value);
+                this._setAllPosition(this._getPercentByValue(this.value));
+            } else {
+                this.label.setValue(this.max);
+                this._setAllPosition(100);
+            }
+        }
+    }
+});
+BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.single_slider", BI.SingleSlider);

src/widget/singleslider1/slider/widget.slider.js

@@ -0,0 +1,33 @@
+/**
+ * Created by zcf on 2016/9/22.
+ */
+BI.Slider = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider-slider"
+        });
+    },
+    _init: function () {
+        BI.extend(BI.Slider.superclass._init.apply(this, arguments));
+        this.slider = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "widget-slider-icon",
+            iconWidth: 30,
+            iconHeight: 30,
+            height: 30,
+            width: 30
+        });
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: this.slider,
+                top: 0,
+                left: -15
+            }],
+            width: 0,
+            height: 30
+        });
+    }
+});
+BI.shortcut("bi.single_slider_slider", BI.Slider);