The main server, and probably only repository in this org.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React, {useLayoutEffect, useState} from "react"; import {randId} from "../../Helpers/random"; import iro from "@jaames/iro";
function BrightnessSlider({brightness, onChange}) { const [random] = useState(randId());
useLayoutEffect(() => { const colorPicker = new iro.ColorPicker("#brightness-picker-" + random, { color: `rgb(${brightness}, ${brightness}, ${brightness})`, layout: [ { component: iro.ui.Slider, options: { borderColor: '#888' } } ], });
colorPicker.on("input:end", color => { onChange(color.rgb.r); });
return () => { const elem = document.getElementById(`brightness-picker-${random}`); if (elem === null) { return; }
elem.innerHTML = ""; }; }, [brightness]);
return ( <div id={`brightness-picker-${random}`}>
</div> ); }
export default BrightnessSlider;
|