diff --git a/packages/fineui/src/widget/intervalslider/intervalslider.js b/packages/fineui/src/widget/intervalslider/intervalslider.js index ce07c7451..894ef7a2c 100644 --- a/packages/fineui/src/widget/intervalslider/intervalslider.js +++ b/packages/fineui/src/widget/intervalslider/intervalslider.js @@ -42,6 +42,8 @@ export class IntervalSlider extends Single { min: 0, max: 100, value: { min: "", max: "" }, + lAlign: "center", + rAlign: "center", }; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -61,6 +63,7 @@ export class IntervalSlider extends Single { this.enable = false; this.valueOne = ""; this.valueTwo = ""; + const { unit, lAlign, rAlign, editorWidth } = this.options; this.calculation = new AccurateCalculationModel(); this.grayTrack = createWidget({ @@ -78,9 +81,10 @@ export class IntervalSlider extends Single { this.labelOne = createWidget({ type: SignTextEditor.xtype, cls: "slider-editor-button", - text: this.options.unit, + text: unit, allowBlank: false, - width: toPix(c.EDITOR_WIDTH, 2), + textAlign: lAlign, + width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2), height: toPix(c.EDITOR_HEIGHT, 2), validationChecker: v => this._checkValidation(v), }); @@ -107,9 +111,10 @@ export class IntervalSlider extends Single { this.labelTwo = createWidget({ type: SignTextEditor.xtype, cls: "slider-editor-button", - text: this.options.unit, + text: unit, allowBlank: false, - width: toPix(c.EDITOR_WIDTH, 2), + textAlign: rAlign, + width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2), height: toPix(c.EDITOR_HEIGHT, 2), validationChecker: v => this._checkValidation(v), }); @@ -258,21 +263,15 @@ export class IntervalSlider extends Single { el: this.labelOne, top: 0, left: 0, - } - ], - }, - { - type: AbsoluteLayout.xtype, - items: [ + }, { el: this.labelTwo, top: 0, right: 0, - } + }, ], - } + }, ], - rgap: c.EDITOR_R_GAP, height: c.SLIDER_HEIGHT, }, top: 0, @@ -403,8 +402,17 @@ export class IntervalSlider extends Single { } _resetLabelPosition(needReverse) { - this.labelOne.element.css({ left: needReverse ? "100%" : "0%" }); - this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" }); + const { lAlign, rAlign } = this.options; + this.labelOne.element.css({ + left: needReverse ? "unset" : "0%", + right: needReverse ? "0%" : "unset", + }); + this.labelOne.element.children()[0] && (this.labelOne.element.children()[0].style.textAlign = needReverse ? rAlign : lAlign); + this.labelTwo.element.css({ + left: needReverse ? "0%" : "unset", + right: needReverse ? "unset" : "0%", + }); + this.labelTwo.element.children()[0] && (this.labelTwo.element.children()[0].style.textAlign = needReverse ? lAlign : rAlign); } _setSliderOnePosition(percent) {