dont allow empty values in any condition for slider

src/legacy/ui/public/validated_range/is_range_valid.js

@@ -22,12 +22,13 @@ import { i18n } from '@kbn/i18n';
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
 
-export function isRangeValid(value, min, max) {
+export function isRangeValid(value, min, max, allowEmptyRange) {
+  allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true;//cannot use default props since that uses falsy check
   let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX];
   let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX];
 
-  const isLowerValueValid = lowerValue !== '';
-  const isUpperValueValid = upperValue !== '';
+  const isLowerValueValid = lowerValue.toString() !== '';
+  const isUpperValueValid = upperValue.toString() !== '';
   if (isLowerValueValid) {
     lowerValue = parseFloat(lowerValue);
   }
@@ -37,22 +38,23 @@ export function isRangeValid(value, min, max) {
   let isValid = true;
   let errorMessage = '';
 
-  if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) {
+  if (!allowEmptyRange && (!isLowerValueValid || !isUpperValueValid)) {
+    isValid = false;
+    errorMessage = i18n.translate('common.ui.dualRangeControl.bothMustNotBeEmptyWhenNotAllowed', {
+      defaultMessage: 'Neither lower and upper values can be empty'
+    });
+  } else if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) {
     isValid = false;
     errorMessage = i18n.translate('common.ui.dualRangeControl.mustSetBothErrorMessage', {
       defaultMessage: 'Both lower and upper values must be set'
     });
-  }
-
-  if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
+  } else if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
     isValid = false;
     errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', {
       defaultMessage: 'Values must be on or between {min} and {max}',
       values: { min, max }
     });
-  }
-
-  if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
+  } else if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
     isValid = false;
     errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', {
       defaultMessage: 'Upper value must be greater or equal to lower value'

src/legacy/ui/public/validated_range/is_range_valid.test.js

@@ -34,6 +34,11 @@ it('Should return true when lower and upper values are not set (empty range)', (
   expect(isValid).toBe(true);
 });
 
+it('Should return false when lower and upper values are not set (empty range) and empty ranges are not allowed', () => {
+  const { isValid } = isRangeValid(['', ''], 1, 10, false);
+  expect(isValid).toBe(false);
+});
+
 it('Should return false when lower value is not set and upper value is set', () => {
   const { isValid, errorMessage } = isRangeValid(['', 3], 1, 10);
   expect(isValid).toBe(false);

src/legacy/ui/public/validated_range/validated_dual_range.js

@@ -18,6 +18,7 @@
  */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { isRangeValid } from './is_range_valid';
 
 import {
@@ -35,20 +36,22 @@ export class ValidatedDualRange extends Component {
       const { isValid, errorMessage } = isRangeValid(
         nextProps.value,
         nextProps.min,
-        nextProps.max);
+        nextProps.max,
+        nextProps.allowEmptyRange
+      );
       return {
         value: nextProps.value,
         prevValue: nextProps.value,
         isValid,
-        errorMessage,
+        errorMessage
       };
     }
 
     return null;
   }
 
-  onChange = (value) => {
-    const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max);
+  _onChange = (value) => {
+    const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max, this.props.allowEmptyRange);
 
     this.setState({
       value,
@@ -68,17 +71,26 @@ export class ValidatedDualRange extends Component {
       ...rest
     } = this.props;
 
+
     return (
       <EuiFormRow
         isInvalid={!this.state.isValid}
         error={this.state.errorMessage ? [this.state.errorMessage] : []}
       >
         <EuiDualRange
           value={this.state.value}
-          onChange={this.onChange}
+          onChange={this._onChange}
           {...rest}
         />
       </EuiFormRow>
     );
   }
 }
+
+ValidatedDualRange.propTypes = {
+  allowEmptyRange: PropTypes.bool,
+};
+
+ValidatedDualRange.defaultProps = {
+  allowEmptyRange: true
+};

x-pack/plugins/maps/public/components/layer_panel/settings_panel/settings_panel.js

@@ -32,10 +32,10 @@ export function SettingsPanel(props) {
     props.updateLabel(props.layerId, label);
   };
 
-  const onZoomChange = (event) => {
-    const minZoom = Math.max(MIN_ZOOM, parseInt(event[0], 10));
+  const onZoomChange = (value) => {
+    const minZoom = Math.max(MIN_ZOOM, parseInt(value[0], 10));
     props.updateMinZoom(props.layerId, minZoom);
-    const maxZoom = Math.min(MAX_ZOOM, parseInt(event[1], 10));
+    const maxZoom = Math.min(MAX_ZOOM, parseInt(value[1], 10));
     props.updateMaxZoom(props.layerId, maxZoom);
   };
 
@@ -95,6 +95,7 @@ export function SettingsPanel(props) {
                 showInput
                 showRange
                 onChange={onZoomChange}
+                allowEmptyRange={false}
               />
             </EuiFormRow>
           </EuiFlexItem>

x-pack/plugins/maps/public/shared/layers/styles/components/vector/size/size_range_selector.js

@@ -44,6 +44,7 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
             showInput
             showRange
             onChange={onSizeChange}
+            allowEmptyRange={false}
           />
         </EuiFormRow>
       </EuiFlexItem>