1 files changed, 37 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js
new file mode 100644
index 0000000..1172966
--- /dev/null
+++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js
@@ -0,0 +1,37 @@
+function InputRange({
+  label,
+  id,
+  name,
+  min = 5,
+  max = 200,
+  step = 1,
+  unit = "px",
+  value,
+  onChangeHandler,
+}) {
+  return (
+    <>
+      {label ? (
+        <label className="form__label" htmlFor={id}>
+          {label}
+        </label>
+      ) : (
+        ""
+      )}
+      <input
+        type="range"
+        id={id}
+        name={name}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={onChangeHandler}
+        title={`${value}${unit}`}
+        className="form__input form__input--range"
+      />
+    </>
+  );
+}
+
+export default InputRange;