From 3dda7ef1e0be9ff40c5aaded0e1b8c1f8c6398e8 Mon Sep 17 00:00:00 2001
From: Natxo <1172351+natxocc@users.noreply.github.com>
Date: Tue, 31 Mar 2026 12:13:34 +0200
Subject: [PATCH] Add Range component for input range selection

---
 src/components/Range.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/Range.js

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;
+};