@react-awesome-query-builder-dev/ui/esm/components/widgets/vanilla/value/VanillaSlider.js

User-friendly query builder for React. Core React UI

import _extends from "@babel/runtime/helpers/extends";
import React from "react";
export default (function (props) {
  var value = props.value,
    setValue = props.setValue,
    config = props.config,
    readonly = props.readonly,
    min = props.min,
    max = props.max,
    step = props.step,
    placeholder = props.placeholder,
    _props$customProps = props.customProps,
    customProps = _props$customProps === void 0 ? {} : _props$customProps;
  var customInputProps = customProps.input || {};
  var customSliderProps = customProps.slider || customProps;
  var onChange = function onChange(e) {
    var val = e.target.value;
    if (val === "" || val === null) val = undefined;else val = Number(val);
    setValue(val);
  };
  var numberValue = value == undefined ? "" : value;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "inline-flex"
    }
  }, /*#__PURE__*/React.createElement("input", _extends({
    key: "number",
    type: "number",
    value: numberValue,
    placeholder: placeholder,
    disabled: readonly,
    min: min,
    max: max,
    step: step,
    onChange: onChange
  }, customInputProps)), /*#__PURE__*/React.createElement("input", _extends({
    key: "range",
    type: "range",
    value: numberValue,
    disabled: readonly,
    min: min,
    max: max,
    step: step,
    onChange: onChange
  }, customSliderProps)));
});