From f93bc7d3e036dc56dfb46e31d26aee5a79194750 Mon Sep 17 00:00:00 2001
From: Hewston Fox <hewstonfox@gmail.com>
Date: Wed, 18 Mar 2026 02:12:05 +0200
Subject: [PATCH] feat: add range input haptic feedback

---
 src/components/form/RangeInput/RangeInput.tsx | 7 ++++++-
 src/tg/index.ts                               | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/form/RangeInput/RangeInput.tsx b/src/components/form/RangeInput/RangeInput.tsx
index e10375a..9b95f04 100644
--- a/src/components/form/RangeInput/RangeInput.tsx
+++ b/src/components/form/RangeInput/RangeInput.tsx
@@ -2,13 +2,14 @@ import { motion, type HTMLMotionProps } from "motion/react";
 import { useState } from "react";
 import clsx, { type ClassValue } from "clsx";
 
+import tg from "@/tg";
 import classes from "./RangeInput.module.css";
 
 type Props = Omit<HTMLMotionProps<"input">, "className"> & {
   className?: ClassValue;
 };
 
-export default function RangeInput({ className, ...props }: Props) {
+export default function RangeInput({ className, onChange, ...props }: Props) {
   const [isDragging, setIsDragging] = useState(false);
 
   return (
@@ -16,6 +17,10 @@ export default function RangeInput({ className, ...props }: Props) {
       {...props}
       type="range"
       className={clsx(classes.rangeInput, isDragging && classes.dragging, className)}
+      onChange={(e) => {
+        tg.hapticFeedback.inputChange();
+        onChange?.(e);
+      }}
       onMouseDown={() => setIsDragging(true)}
       onMouseUp={() => setIsDragging(false)}
       onMouseLeave={() => setIsDragging(false)}
diff --git a/src/tg/index.ts b/src/tg/index.ts
index b460cf2..369be55 100644
--- a/src/tg/index.ts
+++ b/src/tg/index.ts
@@ -87,6 +87,7 @@ export default {
     console.log(
       isRealTelegram() ? "Telegram Mini App initialized" : "TMA Debug mode in Web initialized",
     );
+    console.log(tg.retrieveLaunchParams());
   },
   openLink(url: string | URL, options?: tg.OpenLinkOptions) {
     tg.openLink.ifAvailable(url, options);
@@ -95,6 +96,9 @@ export default {
     click() {
       tg.hapticFeedback.impactOccurred.ifAvailable("light");
     },
+    inputChange() {
+      tg.hapticFeedback.selectionChanged.ifAvailable();
+    },
   },
   initData: tg.initData,
   storage: {