Init Customizer

docs/_react/bulma-customizer/src/components/Slider.jsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+const RANGES = {
+  deg: [0, 360, 1],
+  "%": [0, 100, 1],
+};
+
+function Slider({ id, start, unit }) {
+  const [value, setValue] = useState(start);
+
+  let min = 0;
+  let max = 360;
+  let step = 1;
+
+  if (unit in RANGES) {
+    [min, max, step] = RANGES[unit];
+  }
+
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const handleReset = () => {
+    setValue(start);
+  };
+
+  useEffect(() => {
+    const computedValue = `${value}${unit}`;
+
+    if (value === start) {
+      document.documentElement.style.removeProperty(`--bulma-${id}`);
+    } else {
+      document.documentElement.style.setProperty(
+        `--bulma-${id}`,
+        computedValue,
+      );
+    }
+  }, [id, start, unit, value]);
+
+  return (
+    <div>
+      <code>{id}</code>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+      />
+      <code>
+        {value}
+        {unit}
+      </code>
+      <button className="button is-small" onClick={handleReset}>
+        Reset
+      </button>
+    </div>
+  );
+}
+
+Slider.propTypes = {
+  id: PropTypes.string,
+  original: PropTypes.string,
+  start: PropTypes.number,
+  unit: PropTypes.string,
+};
+
+export default Slider;