@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/legacy/Slider/Slider.js

@@ -3,14 +3,10 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "className", "name", "label", "status", "statusMessage", "disabled", "required", "requiredMessage", "readOnly", "aria-errormessage", "classes", "hideInput", "markProperties", "markStep", "markDigits", "knobProperties", "values", "defaultValues", "inputProps", "theme", "maxPointValue", "minPointValue", "divisionQuantity", "formatMark", "noOverlap", "onChange", "onBlur", "onBeforeChange", "onAfterChange", "formatTooltip", "sliderProps", "knobProps"],
-    _excluded2 = ["className", "style"];
-
+  _excluded2 = ["className", "style"];
 var _this = this;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
@@ -41,61 +37,59 @@ import validationStates from "../Forms/FormElement/validationStates";
 import { knobsPositionToScaledValue, calculateStepValue, createKnobStyles, createTrackStyles, createMark, knobsValuesToKnobsPositions, knobsPositionsToKnobsValues, scaledValueToKnobsPositionValue, generateDefaultKnobProperties, isSingleSlider, ensureValuesConsistency, convertStatusToArray, statusArrayToFormStatus } from "./utils";
 import styleCreator from "./styles";
 import SliderInput from "./SliderInput";
+
 /**
  * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. Still in development
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var HvSlider = function HvSlider(props) {
   var id = props.id,
-      className = props.className,
-      name = props.name,
-      label = props.label,
-      status = props.status,
-      statusMessage = props.statusMessage,
-      disabled = props.disabled,
-      _props$required = props.required,
-      required = _props$required === void 0 ? false : _props$required,
-      _props$requiredMessag = props.requiredMessage,
-      requiredMessage = _props$requiredMessag === void 0 ? "The value is required" : _props$requiredMessag,
-      _props$readOnly = props.readOnly,
-      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-      ariaErrorMessage = props["aria-errormessage"],
-      classes = props.classes,
-      _props$hideInput = props.hideInput,
-      hideInput = _props$hideInput === void 0 ? false : _props$hideInput,
-      _props$markProperties = props.markProperties,
-      markProperties = _props$markProperties === void 0 ? [] : _props$markProperties,
-      _props$markStep = props.markStep,
-      markStep = _props$markStep === void 0 ? 20 : _props$markStep,
-      _props$markDigits = props.markDigits,
-      markDigits = _props$markDigits === void 0 ? 0 : _props$markDigits,
-      knobPropertiesProp = props.knobProperties,
-      valuesProp = props.values,
-      _props$defaultValues = props.defaultValues,
-      defaultValues = _props$defaultValues === void 0 ? [undefined] : _props$defaultValues,
-      inputProps = props.inputProps,
-      theme = props.theme,
-      _props$maxPointValue = props.maxPointValue,
-      maxPointValue = _props$maxPointValue === void 0 ? 100 : _props$maxPointValue,
-      _props$minPointValue = props.minPointValue,
-      minPointValue = _props$minPointValue === void 0 ? 0 : _props$minPointValue,
-      _props$divisionQuanti = props.divisionQuantity,
-      divisionQuantity = _props$divisionQuanti === void 0 ? 100 : _props$divisionQuanti,
-      formatMark = props.formatMark,
-      _props$noOverlap = props.noOverlap,
-      noOverlap = _props$noOverlap === void 0 ? true : _props$noOverlap,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onBeforeChange = props.onBeforeChange,
-      onAfterChange = props.onAfterChange,
-      formatTooltip = props.formatTooltip,
-      sliderProps = props.sliderProps,
-      knobProps = props.knobProps,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    name = props.name,
+    label = props.label,
+    status = props.status,
+    statusMessage = props.statusMessage,
+    disabled = props.disabled,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$requiredMessag = props.requiredMessage,
+    requiredMessage = _props$requiredMessag === void 0 ? "The value is required" : _props$requiredMessag,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    ariaErrorMessage = props["aria-errormessage"],
+    classes = props.classes,
+    _props$hideInput = props.hideInput,
+    hideInput = _props$hideInput === void 0 ? false : _props$hideInput,
+    _props$markProperties = props.markProperties,
+    markProperties = _props$markProperties === void 0 ? [] : _props$markProperties,
+    _props$markStep = props.markStep,
+    markStep = _props$markStep === void 0 ? 20 : _props$markStep,
+    _props$markDigits = props.markDigits,
+    markDigits = _props$markDigits === void 0 ? 0 : _props$markDigits,
+    knobPropertiesProp = props.knobProperties,
+    valuesProp = props.values,
+    _props$defaultValues = props.defaultValues,
+    defaultValues = _props$defaultValues === void 0 ? [undefined] : _props$defaultValues,
+    inputProps = props.inputProps,
+    theme = props.theme,
+    _props$maxPointValue = props.maxPointValue,
+    maxPointValue = _props$maxPointValue === void 0 ? 100 : _props$maxPointValue,
+    _props$minPointValue = props.minPointValue,
+    minPointValue = _props$minPointValue === void 0 ? 0 : _props$minPointValue,
+    _props$divisionQuanti = props.divisionQuantity,
+    divisionQuantity = _props$divisionQuanti === void 0 ? 100 : _props$divisionQuanti,
+    formatMark = props.formatMark,
+    _props$noOverlap = props.noOverlap,
+    noOverlap = _props$noOverlap === void 0 ? true : _props$noOverlap,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onBeforeChange = props.onBeforeChange,
+    onAfterChange = props.onAfterChange,
+    formatTooltip = props.formatTooltip,
+    sliderProps = props.sliderProps,
+    knobProps = props.knobProps,
+    others = _objectWithoutProperties(props, _excluded);
   var styles = styleCreator(theme);
   var stepValue = useMemo(function () {
     return calculateStepValue(maxPointValue, minPointValue, divisionQuantity);
@@ -110,39 +104,33 @@ var HvSlider = function HvSlider(props) {
   var value = useMemo(function () {
     return (valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.length) > 0 ? knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue, isSingle) : undefined;
   }, [inverseStepValue, isSingle, minPointValue, valuesProp]);
-
   var _useControlled = useControlled(value, defaultKnobsPositions),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      knobsPositions = _useControlled2[0],
-      setKnobsPositions = _useControlled2[1];
-
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    knobsPositions = _useControlled2[0],
+    setKnobsPositions = _useControlled2[1];
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isDraggingTrack = _useState2[0],
-      setIsDraggingTrack = _useState2[1]; // signals that the user has manually edited the input value
-
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggingTrack = _useState2[0],
+    setIsDraggingTrack = _useState2[1];
+  // signals that the user has manually edited the input value
   var isDirty = useRef(false);
-  var elementId = useUniqueId(id, "hvSlider"); // miscellaneous state
-
-  var hasLabel = label != null; // validation related state
-
+  var elementId = useUniqueId(id, "hvSlider");
+  // miscellaneous state
+  var hasLabel = label != null;
+  // validation related state
   var _useMemo = useMemo(function () {
-    return convertStatusToArray(status, knobsPositions.length);
-  }, [knobsPositions.length, status]),
-      arrayStatus = _useMemo.arrayStatus,
-      arrayDefaultStatus = _useMemo.arrayDefaultStatus;
-
+      return convertStatusToArray(status, knobsPositions.length);
+    }, [knobsPositions.length, status]),
+    arrayStatus = _useMemo.arrayStatus,
+    arrayDefaultStatus = _useMemo.arrayDefaultStatus;
   var _useControlled3 = useControlled(arrayStatus, arrayDefaultStatus),
-      _useControlled4 = _slicedToArray(_useControlled3, 2),
-      validationStatus = _useControlled4[0],
-      setValidationState = _useControlled4[1];
-
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    validationStatus = _useControlled4[0],
+    setValidationState = _useControlled4[1];
   var _useControlled5 = useControlled(statusMessage, ""),
-      _useControlled6 = _slicedToArray(_useControlled5, 2),
-      validationMessage = _useControlled6[0],
-      setValidationMessage = _useControlled6[1];
-
+    _useControlled6 = _slicedToArray(_useControlled5, 2),
+    validationMessage = _useControlled6[0],
+    setValidationMessage = _useControlled6[1];
   var canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && required);
   var knobProperties = generateDefaultKnobProperties(knobPropertiesProp, knobsPositions.length, disabled, theme);
   var trackStyles = createTrackStyles(knobProperties, styles);
@@ -158,22 +146,18 @@ var HvSlider = function HvSlider(props) {
         invalid = true;
         return validationStates.invalid;
       }
-
       return validationStates.valid;
     });
     setValidationState(_toConsumableArray(newValidationState));
-
     if (invalid) {
       setValidationMessage(requiredMessage);
       return;
     }
-
     setValidationMessage("");
   }, [knobsPositions, requiredMessage, setValidationMessage, setValidationState]);
   useEffect(function () {
     var stepVl = calculateStepValue(maxPointValue, minPointValue, divisionQuantity);
     var inverseStepVl = 1 / stepVl;
-
     if ((valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.length) > 0) {
       setKnobsPositions(knobsValuesToKnobsPositions(valuesProp.length > 0 ? valuesProp : defaultValues, inverseStepVl, minPointValue));
     }
@@ -184,9 +168,9 @@ var HvSlider = function HvSlider(props) {
       // the user never manually edited the input value
       return;
     }
-
     performValidation(knobsPositions, requiredMessage);
   }, [knobsPositions, requiredMessage, performValidation]);
+
   /**
    * Generates an object which posses the current value and position of the knobs.
    *
@@ -194,7 +178,6 @@ var HvSlider = function HvSlider(props) {
    * @returns {Object} - An object with the positions and values of the knobs.
    * @memberof HvSlider
    */
-
   var generateKnobsPositionAndValues = function generateKnobsPositionAndValues(knobsCurrentPosition) {
     var newKnobsPosition = knobsCurrentPosition.slice();
     var knobsValues = [];
@@ -202,26 +185,20 @@ var HvSlider = function HvSlider(props) {
     var findDuplicated = newKnobsPosition.filter(function (item, index) {
       return newKnobsPosition.indexOf(item) !== index;
     });
-
     if (noOverlap && findDuplicated.length > 0) {
       var _findDuplicated = _slicedToArray(findDuplicated, 1);
-
       duplicatedValue = _findDuplicated[0];
     }
-
     newKnobsPosition.forEach(function (position, index, array) {
       var newArray = array;
       var newPosition = position;
-
       if (noOverlap && newPosition === duplicatedValue) {
         var previousValue = knobsPositions[index];
-
         if (previousValue !== newPosition) {
           newPosition += newPosition > previousValue ? -1 : 1;
           newArray[index] = newPosition;
         }
       }
-
       knobsValues[index] = knobsPositionToScaledValue(newPosition, minPointValue, stepValue);
     }, _this);
     return {
@@ -229,6 +206,7 @@ var HvSlider = function HvSlider(props) {
       knobsValues: knobsValues
     };
   };
+
   /**
    * Function executed while the knobs changes.
    *
@@ -238,8 +216,6 @@ var HvSlider = function HvSlider(props) {
    * @param {Array} knobsPosition - An array containing the current positions of the knobs.
    * @memberof HvSlider
    */
-
-
   var onChangeHandler = function onChangeHandler(knobsPosition) {
     isDirty.current = true;
     var knobs = generateKnobsPositionAndValues(knobsPosition);
@@ -252,12 +228,12 @@ var HvSlider = function HvSlider(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange(knobs.knobsValues);
     setKnobsPositions(knobs.knobsPosition);
   };
-
   var onInputChangeHandler = function onInputChangeHandler(inputValues, index) {
     var newKnobPositions = knobsValuesToKnobsPositions(inputValues, inverseStepValue, minPointValue);
     newKnobPositions = ensureValuesConsistency(newKnobPositions, index);
     onChangeHandler(newKnobPositions);
   };
+
   /**
    * Function executed before a change.
    *
@@ -266,12 +242,11 @@ var HvSlider = function HvSlider(props) {
    * @param {Array} knobsPosition - An array containing the current positions of the knobs.
    * @memberof HvSlider
    */
-
-
   var onBeforeChangeHandler = function onBeforeChangeHandler(knobsPosition) {
     var knobs = generateKnobsPositionAndValues(knobsPosition);
     onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(knobs.knobsValues);
   };
+
   /**
    * Function executed after a change.
    *
@@ -280,29 +255,23 @@ var HvSlider = function HvSlider(props) {
    * @param {Array} knobsPosition - An array containing the current positions of the knobs.
    * @memberof HvSlider
    */
-
-
   var onAfterChangeHandler = function onAfterChangeHandler(knobsPosition) {
     var knobs = generateKnobsPositionAndValues(knobsPosition);
     onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(knobs.knobsValues);
   };
-
   var onMouseDownHandler = function onMouseDownHandler(event) {
     if (event.target.className.includes("track")) {
       setIsDraggingTrack(true);
     }
   };
-
   var onMouseUpHandler = function onMouseUpHandler() {
     setIsDraggingTrack(false);
   };
-
   var onBlurHandler = function onBlurHandler(event) {
     var knobs = generateKnobsPositionAndValues(knobsPositions);
     performValidation(knobsPositions, requiredMessage);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, knobs.knobsValues, status);
   };
-
   var sliderInputId = setId(elementId, "input");
   /**
    * Function used to create a custom knob for the slider.
@@ -314,25 +283,20 @@ var HvSlider = function HvSlider(props) {
    * @param {Object} props - An object containing the properties of the knobs.
    * @memberof HvSlider
    */
-
   var createKnob = function createKnob(knobNode, params) {
     var knobValue = params.value,
-        dragging = params.dragging,
-        index = params.index;
-
+      dragging = params.dragging,
+      index = params.index;
     var _knobNode$props = knobNode.props,
-        knobClassName = _knobNode$props.className,
-        style = _knobNode$props.style,
-        restProps = _objectWithoutProperties(_knobNode$props, _excluded2);
-
+      knobClassName = _knobNode$props.className,
+      style = _knobNode$props.style,
+      restProps = _objectWithoutProperties(_knobNode$props, _excluded2);
     var scaledKnobValue = knobsPositionToScaledValue(knobValue, minPointValue, stepValue).toFixed(markDigits);
-
     if (dragging) {
       style.backgroundColor = knobProperties[index].dragColor;
     } else {
       style.backgroundColor = knobProperties[index].color;
     }
-
     var isEmpty = Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;
     var handleId = setId(elementId, "knob");
     var indexedHandleId = setId(handleId, index);
@@ -360,7 +324,6 @@ var HvSlider = function HvSlider(props) {
       })
     }, index);
   };
-
   return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     className: clsx(className, classes.root, !readOnly && !disabled && !isSingle && [isDraggingTrack && classes.trackDragging, !isDraggingTrack && classes.trackStandBy], disabled && classes.rootDisabled),
     id: id,
@@ -448,60 +411,49 @@ var HvSlider = function HvSlider(props) {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * Id to be applied to the slider root node.
    */
   id: PropTypes.string,
-
   /**
    * The slider name.
    */
   name: PropTypes.string,
-
   /**
    * The label of the slider.
    *
    * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.
    */
   label: PropTypes.node,
-
   /**
    * Indicates that the slider is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Indicates that the slider is not editable.
    */
   readOnly: PropTypes.bool,
-
   /**
    * Indicates that user slider is required on the form element.
    */
   required: PropTypes.bool,
-
   /**
    * What message to render when the value is required.
    */
   requiredMessage: PropTypes.string,
-
   /**
    * if `true` the input that controls the slider is hidden.
    */
   hideInput: PropTypes.bool,
-
   /**
    * Attributes applied to the slider element.
    */
   sliderProps: PropTypes.instanceOf(Object),
-
   /**
    * The status of the slider.
    *
@@ -511,22 +463,18 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
    * or "invalid" after any change to `checked`, depending of the values of both `required` and `checked`.
    */
   status: PropTypes.oneOfType([PropTypes.oneOf(["standBy", "valid", "invalid"]), PropTypes.arrayOf(PropTypes.oneOf(["standBy", "valid", "invalid"]))]),
-
   /**
    * The error message to show when `status` is "invalid".
    */
   statusMessage: PropTypes.string,
-
   /**
    * The values array to apply to the component
    */
   values: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * The default values array to apply to the component
    */
   defaultValues: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * The object used to set the knob properties,
    * for every item in the array a new knob will be created.
@@ -541,7 +489,6 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
     hidden: PropTypes.bool,
     fixed: PropTypes.bool
   })),
-
   /**
    * The object used to set the mark properties individually.
    */
@@ -549,70 +496,57 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
     position: PropTypes.number,
     label: PropTypes.string
   })),
-
   /**
    * the function executed before a change will occur in the slider.
    */
   onBeforeChange: PropTypes.func,
-
   /**
    * the function executed while a change is occurring in the slider.
    */
   onChange: PropTypes.func,
-
   /**
    * the function executed after a change ocurred in the slider.
    */
   onAfterChange: PropTypes.func,
-
   /**
    * the function executed after a blur ocurred in the slider.
    */
   onBlur: PropTypes.func,
-
   /**
    * the separation in points between marks.
    * example: if 10 divisions and a markstep of 2 there will be 5 marks.
    */
   markStep: PropTypes.number,
-
   /**
    * how many subdivisions there are in the slider.
    */
   divisionQuantity: PropTypes.number,
-
   /**
    * the value of the first point in the slider from left to right.
    */
   minPointValue: PropTypes.number,
-
   /**
    * the value of the last point in the slider from left to right.
    */
   maxPointValue: PropTypes.number,
-
   /**
    * the max number of decimals if no format function is applied
    */
   markDigits: PropTypes.number,
-
   /**
    * a formatting function used to add format to the marks in the track,
    * the function receives the mark text
    */
   formatMark: PropTypes.func,
-
   /**
    * a formatting function used to add format to the tooltip in the track,
    * the function receives the mark text
    */
   formatTooltip: PropTypes.func,
-
   /**
    * if `true` the knobs can't have the same value, if `false` knobs can have the same value.
    */
   noOverlap: PropTypes.bool,
-
   /**
    * the classes object to be applied into the root object.
    */
@@ -621,151 +555,122 @@ process.env.NODE_ENV !== "production" ? HvSlider.propTypes = {
      * Style applied to the root of the component.
      */
     root: PropTypes.string,
-
     /**
      * Style applied to the root of the component when in range mode.
      */
     rootRange: PropTypes.string,
-
     /**
      * Style applied to the container holding the label.
      */
     labelContainer: PropTypes.string,
-
     /**
      * Style applied to the label.
      */
     label: PropTypes.string,
-
     /**
      * Style applied to the knob.
      */
     handle: PropTypes.string,
-
     /**
      * Style applied to the container that has the knob used to move.
      */
     handleContainer: PropTypes.string,
-
     /**
      * Base slider styles to avoid the css import from node_modules and enable SSR support.
      * import("rc-slider/assets/index.css")
      */
     sliderBase: PropTypes.string,
-
     /**
      * Style applied to the div where the slider is placed.
      */
     sliderRoot: PropTypes.string,
-
     /**
      * Style applied when the user is dragging the range track.
      */
     trackDragging: PropTypes.string,
-
     /**
      * Style applied when root container is disabled.
      */
     rootDisabled: PropTypes.string,
-
     /**
      * Style applied when the user is not dragging the range track.
      */
     trackStandBy: PropTypes.string,
-
     /**
      * Style applied to the warning container.
      */
     error: PropTypes.string,
-
     /**
      * Style applied to the handle container when it is hidden.
      */
     handleHiddenContainer: PropTypes.string,
-
     /**
      * Style applied to the handle container when it is disabled.
      */
     handleContainerDisabled: PropTypes.string,
-
     /**
      * Style applied when the label element is present.
      */
     labelIncluded: PropTypes.string,
-
     /**
      * Style applied when only the input element is present.
      */
     onlyInput: PropTypes.string,
-
     /**
      * Style applied to the dot.
      */
     dot: PropTypes.string,
-
     /**
      * Style applied to the rail.
      */
     rail: PropTypes.string,
-
     /**
      * Style applied to the inner of the knob.
      */
     knobInner: PropTypes.string,
-
     /**
      * Style applied to the outside of the knob.
      */
     knobOuter: PropTypes.string,
-
     /**
      * Style applied when the knob is hidden.
      */
     knobHidden: PropTypes.string,
-
     /**
      * Style applied  last hidden knob.
      */
     knobHiddenLast: PropTypes.string,
-
     /**
      * Style applied to the track.
      */
     track: PropTypes.string,
-
     /**
      * Style applied to the mark.
      */
     mark: PropTypes.string,
-
     /**
      * Style applied to the tooltip.
      */
     sliderTooltip: PropTypes.string,
-
     /**
      * Style applied to the container of the tooltip.
      */
     sliderContainer: PropTypes.string
   }).isRequired,
-
   /**
    * Identifies the element that provides an error message for the slider.
    *
    * Will only be used when the validation status is invalid.
    */
   "aria-errormessage": PropTypes.string,
-
   /**
    * Attributes applied to the input element.
    */
   inputProps: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
-
   /**
    * Attributes applied to the input element.
    */
   knobProps: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
-
   /**
    * Theme object required to style the slider.
    */