gather-content-ui/dist/lib/src/modules/slider/Slider.js

GatherContent UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Slider = Slider;
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function Slider(_ref) {
  var id = _ref.id,
    labelText = _ref.labelText,
    labelClass = _ref.labelClass,
    min = _ref.min,
    max = _ref.max,
    step = _ref.step,
    value = _ref.value,
    onChange = _ref.onChange,
    children = _ref.children;
  var valueAsPercent = ((value - min) * 100 / (max - min)).toFixed(0);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: id,
    className: labelClass
  }, labelText), /*#__PURE__*/_react["default"].createElement("input", {
    id: id,
    className: "gui-input-slider",
    type: "range",
    min: min,
    max: max,
    step: step,
    value: value,
    onChange: onChange
    // @ts-expect-error TS(2322): Type '{ '--val': string; }' is not assignable to t... Remove this comment to see the full error message
    ,
    style: {
      "--val": valueAsPercent
    }
  }), children);
}
Slider.defaultProps = {
  id: "input-slider",
  labelText: "Slider",
  labelClass: "",
  min: 1,
  max: 100,
  step: 1,
  children: null
};
//# sourceMappingURL=Slider.js.map