@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
28 lines • 1.28 kB
JavaScript
/**
* Migrated from PhotoForm 20224/10/31
*
*/
import * as React from 'react';
import { useState, useEffect } from 'react';
require('@mikezimm/fps-styles/dist/fps-Slider.css');
const FPSSlider = (props) => {
const { min, max, step, initial, onChange, label, style, className, htmlFor, values } = props;
const [value, setValue] = useState(initial);
const useHtmlFor = htmlFor ? htmlFor : 'fpsSlider';
useEffect(() => {
setValue(initial);
}, [initial]);
const handleChange = (event) => {
const newValue = typeof event === 'number' ? event : Number(event.target.value);
setValue(newValue);
onChange(newValue);
};
return (React.createElement("div", { className: `fps-slider-container ${className}`, style: style },
label && React.createElement("label", { className: "fps-slider-label", htmlFor: useHtmlFor },
label,
": ",
values ? values[value] : value),
React.createElement("input", { type: "range", id: useHtmlFor, min: values ? 0 : min, max: values ? values.length - 1 : max, step: values ? 1 : step, value: value, className: "fps-slider", onChange: handleChange })));
};
export default FPSSlider;
//# sourceMappingURL=component.js.map