diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx index e3b538b8d6..e4033cafda 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx @@ -46,8 +46,8 @@ class SliderControl extends React.Component { const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl); return ( - <div className={classNames("properties-slider ", { "hide": this.props.state === STATES.HIDDEN })} - data-id={ControlUtils.getDataId(this.props.propertyId)} + <div className={classNames("properties-slider ", { "hide": this.props.state === STATES.HIDDEN }, + this.props.messageInfo ? this.props.messageInfo.type : null)} data-id={ControlUtils.getDataId(this.props.propertyId)} > <Slider {...validationProps} diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss index ef271fd221..b7ff4c7b5d 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - + .properties-slider { .bx--slider-container { min-width: 100%; @@ -22,4 +22,24 @@ min-width: unset; // Default Carbon Component Slider has a fixed min-width of 12.5rem so unset it to make it responsive } } + .bx--number[data-invalid] { // carbon override to not display error + .bx--form-requirement { // carbon override to not display error + display: none; + } + } + &.error { + input { + border: 2px solid $support-01; + } + } + &.warning { + input:not([disabled]) { + border: 2px solid $support-03; + } + } + .bx--text-input--invalid, .bx--text-input { + outline: unset; + outline-offset: unset; + border: unset; + } }