feat: add range input haptic feedback

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)}

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: {