From 4c6dd6d08e1f9e901422a702f3550e39655af634 Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Wed, 15 Jan 2025 14:37:56 +0530
Subject: [PATCH 1/4] fix(docs/slider): prevent context menu from appearing on
 long press of slider thumb on touch devices

---
 .../components/slider/demos/hero/css-modules/index.module.css   | 2 ++
 .../react/components/slider/demos/hero/tailwind/index.tsx       | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
index e779ad5c63..bc8a66d77d 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -25,6 +25,8 @@
   border-radius: 100%;
   background-color: white;
   outline: 1px solid var(--color-gray-300);
+  touch-action: none;
+  user-select: none;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
index 1632fac9d2..779e866bfc 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleSlider() {
       <Slider.Control className="flex w-56 items-center py-3">
         <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
           <Slider.Indicator className="rounded bg-gray-700" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+          <Slider.Thumb className="size-4 touch-none rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>

From 490fc1457adf2d486ead08476a1d25ac6a950eaf Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Thu, 16 Jan 2025 16:35:24 +0530
Subject: [PATCH 2/4] fix: moved touch and select none styles from slider thumb
 to track

---
 .../components/slider/demos/hero/css-modules/index.module.css | 4 ++--
 .../react/components/slider/demos/hero/tailwind/index.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
index bc8a66d77d..d899b7605d 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -12,6 +12,8 @@
   background-color: var(--color-gray-200);
   box-shadow: inset 0 0 0 1px var(--color-gray-200);
   border-radius: 0.25rem;
+  touch-action: none;
+  user-select: none;
 }
 
 .Indicator {
@@ -25,8 +27,6 @@
   border-radius: 100%;
   background-color: white;
   outline: 1px solid var(--color-gray-300);
-  touch-action: none;
-  user-select: none;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
index 779e866bfc..dfb2038e26 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -5,9 +5,9 @@ export default function ExampleSlider() {
   return (
     <Slider.Root defaultValue={25}>
       <Slider.Control className="flex w-56 items-center py-3">
-        <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
+        <Slider.Track className="h-1 w-full touch-none rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
           <Slider.Indicator className="rounded bg-gray-700" />
-          <Slider.Thumb className="size-4 touch-none rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>

From 7c25836d0db01199b8ff34addb1f3a8535002383 Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Thu, 16 Jan 2025 19:19:10 +0530
Subject: [PATCH 3/4] fix: added user and touch selection to none for all
 elements used in the slider component

---
 .../slider/demos/hero/css-modules/index.module.css          | 6 ++++++
 .../react/components/slider/demos/hero/tailwind/index.tsx   | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
index d899b7605d..88c287b67a 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -4,6 +4,8 @@
   align-items: center;
   width: 14rem;
   padding-block: 0.75rem;
+  touch-action: none;
+  user-select: none;
 }
 
 .Track {
@@ -19,6 +21,8 @@
 .Indicator {
   border-radius: 0.25rem;
   background-color: var(--color-gray-700);
+  touch-action: none;
+  user-select: none;
 }
 
 .Thumb {
@@ -27,6 +31,8 @@
   border-radius: 100%;
   background-color: white;
   outline: 1px solid var(--color-gray-300);
+  touch-action: none;
+  user-select: none;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
index dfb2038e26..edaafe6a4a 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -4,10 +4,10 @@ import { Slider } from '@base-ui-components/react/slider';
 export default function ExampleSlider() {
   return (
     <Slider.Root defaultValue={25}>
-      <Slider.Control className="flex w-56 items-center py-3">
+      <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full touch-none rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded bg-gray-700" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+          <Slider.Indicator className="touch-none rounded bg-gray-700 select-none" />
+          <Slider.Thumb className="size-4 touch-none rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>

From 825a67ba63b315595e29bd40166c49a44f5bbf86 Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Mon, 20 Jan 2025 17:55:33 +0530
Subject: [PATCH 4/4] fix: removed redundant touch none styles from slider
 controls descendant elements

---
 .../slider/demos/hero/css-modules/index.module.css          | 3 ---
 .../react/components/slider/demos/hero/tailwind/index.tsx   | 6 +++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
index 88c287b67a..e2df2f6539 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -14,14 +14,12 @@
   background-color: var(--color-gray-200);
   box-shadow: inset 0 0 0 1px var(--color-gray-200);
   border-radius: 0.25rem;
-  touch-action: none;
   user-select: none;
 }
 
 .Indicator {
   border-radius: 0.25rem;
   background-color: var(--color-gray-700);
-  touch-action: none;
   user-select: none;
 }
 
@@ -31,7 +29,6 @@
   border-radius: 100%;
   background-color: white;
   outline: 1px solid var(--color-gray-300);
-  touch-action: none;
   user-select: none;
 
   &:focus-visible {
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
index edaafe6a4a..f72b5220a7 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -5,9 +5,9 @@ export default function ExampleSlider() {
   return (
     <Slider.Root defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full touch-none rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="touch-none rounded bg-gray-700 select-none" />
-          <Slider.Thumb className="size-4 touch-none rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+        <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
+          <Slider.Indicator className="rounded bg-gray-700 select-none" />
+          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>