From 4ef0e634bb9f7a9f92df00499f30c88707e31052 Mon Sep 17 00:00:00 2001
From: mostovoy <mostovoy@uteka.ru>
Date: Mon, 12 Feb 2024 18:15:00 +0300
Subject: [PATCH 1/3] feat: add drag closes handle when press on rail

---
 examples/react/basic/src/main.tsx |  2 ++
 packages/ranger/src/index.ts      | 32 +++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
index 5e58f96..4bd909b 100644
--- a/examples/react/basic/src/main.tsx
+++ b/examples/react/basic/src/main.tsx
@@ -34,6 +34,8 @@ function App() {
           boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
           borderRadius: '2px',
         }}
+        onMouseDown={rangerInstance.handleRailPress}
+        onTouchStart={rangerInstance.handleRailPress}
       >
         {rangerInstance
           .handles()
diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts
index 84f4116..bd26c6f 100644
--- a/packages/ranger/src/index.ts
+++ b/packages/ranger/src/index.ts
@@ -115,6 +115,23 @@ export class Ranger<TTrackElement = unknown> {
     }
   }
 
+  getClosesValueIndex = (val: number): number => {
+    let index = -1
+    let closesValueIndex = -1
+    let distanceBuffer = -1
+
+    this.options.values.forEach((value, index) => {
+      const diff = value - val
+      const distance = Math.abs(diff)
+      if (closesValueIndex === -1 || distance < distanceBuffer) {
+        closesValueIndex = index
+        distanceBuffer = distance
+      }
+    })
+
+    return closesValueIndex
+  }
+
   roundToStep = (val: number) => {
     const { min, max } = this.options
 
@@ -217,6 +234,21 @@ export class Ranger<TTrackElement = unknown> {
     document.addEventListener('touchend', handleRelease)
   }
 
+  handleRailPress = (e: any) => {
+    const clientX =
+      e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX
+    const value = this.getValueForClientX(clientX)
+    const activeHandleIndex = this.getClosesValueIndex(value)
+
+    this.activeHandleIndex = activeHandleIndex
+    this.handleDrag(e)
+    if (this.options.onChange) {
+      this.options.onChange(this)
+    }
+
+    this.handlePress(e, activeHandleIndex)
+  }
+
   getPercentageForValue = (val: number) =>
     this.options.interpolator.getPercentageForValue(
       val,

From f1c04674fdecb89fc2e71c9d01f57d04df286d8f Mon Sep 17 00:00:00 2001
From: mostovoy <mostovoy@uteka.ru>
Date: Mon, 12 Feb 2024 18:40:10 +0300
Subject: [PATCH 2/3] feat: add drag closes handle when press on rail #2

---
 packages/ranger/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts
index bd26c6f..abfa6ac 100644
--- a/packages/ranger/src/index.ts
+++ b/packages/ranger/src/index.ts
@@ -116,7 +116,6 @@ export class Ranger<TTrackElement = unknown> {
   }
 
   getClosesValueIndex = (val: number): number => {
-    let index = -1
     let closesValueIndex = -1
     let distanceBuffer = -1
 

From b46d8ba882db61e3c094cd4c74d98184a33a135d Mon Sep 17 00:00:00 2001
From: mostovoy <mostovoy@uteka.ru>
Date: Wed, 10 Apr 2024 15:03:28 +0300
Subject: [PATCH 3/3] feat: add drag closes handle when press on rail #3

---
 packages/ranger/src/index.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/ranger/src/index.ts b/packages/ranger/src/index.ts
index abfa6ac..b75b4aa 100644
--- a/packages/ranger/src/index.ts
+++ b/packages/ranger/src/index.ts
@@ -115,12 +115,12 @@ export class Ranger<TTrackElement = unknown> {
     }
   }
 
-  getClosesValueIndex = (val: number): number => {
+  getClosesValueIndex = (percentage: number): number => {
     let closesValueIndex = -1
     let distanceBuffer = -1
 
     this.options.values.forEach((value, index) => {
-      const diff = value - val
+      const diff = this.getPercentageForValue(value) - percentage
       const distance = Math.abs(diff)
       if (closesValueIndex === -1 || distance < distanceBuffer) {
         closesValueIndex = index
@@ -237,14 +237,12 @@ export class Ranger<TTrackElement = unknown> {
     const clientX =
       e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX
     const value = this.getValueForClientX(clientX)
-    const activeHandleIndex = this.getClosesValueIndex(value)
+    const percentageForValue = this.getPercentageForValue(value)
+    const activeHandleIndex = this.getClosesValueIndex(percentageForValue)
 
     this.activeHandleIndex = activeHandleIndex
-    this.handleDrag(e)
-    if (this.options.onChange) {
-      this.options.onChange(this)
-    }
 
+    this.handleDrag(e)
     this.handlePress(e, activeHandleIndex)
   }