diff --git a/src/components/Range.js b/src/components/Range.js new file mode 100644 index 0000000..35d4721 --- /dev/null +++ b/src/components/Range.js @@ -0,0 +1,24 @@ +import { $html } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** RANGE */ +export const Range = (props) => { + const { label, tooltip, value, ...rest } = props; + + const rangeEl = $html("input", { + ...rest, + type: "range", + class: joinClass("range", props.class), + value: value, + disabled: () => val(props.disabled) + }); + + if (!label && !tooltip) return rangeEl; + + const layout = $html("div", { class: "flex flex-col gap-2" }, [ + label ? $html("span", { class: "label-text" }, label) : null, + rangeEl + ]); + + return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; +};