From 91f44798a522c736d1a4f34c968c1de67d4ea3d6 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Tue, 28 Sep 2021 09:48:10 +0800
Subject: [PATCH] fix(Slider): fix click invalid with vertical props (#4532)

* fix(Slider): fix click invalid with vertical props

* fix: adjust demo
---
 example/pages/slider/index.wxml | 2 +-
 packages/slider/index.ts        | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml
index e9a2392f..0a35ef8d 100644
--- a/example/pages/slider/index.wxml
+++ b/example/pages/slider/index.wxml
@@ -67,7 +67,7 @@
 <demo-block title="垂直方向">
   <view style="height: 150px; padding-left: 30px;">
     <van-slider
-      value="{{ currentValue }}"
+      value="{{ 50 }}"
       vertical
       custom-class="slider"
       bind:change="onChange"
diff --git a/packages/slider/index.ts b/packages/slider/index.ts
index 33f9f904..9ca6030f 100644
--- a/packages/slider/index.ts
+++ b/packages/slider/index.ts
@@ -109,9 +109,10 @@ VantComponent({
 
       getRect(this, '.van-slider').then((rect) => {
         const { vertical } = this.data;
+        const touch = event.touches[0];
         const delta = vertical
-          ? event.detail.y - rect.top
-          : event.detail.x - rect.left;
+          ? touch.clientY - rect.top
+          : touch.clientX - rect.left;
         const total = vertical ? rect.height : rect.width;
         const value = Number(min) + (delta / total) * this.getRange();
 
@@ -160,7 +161,7 @@ VantComponent({
       this.setData({
         wrapperStyle: `
           background: ${this.data.inactiveColor || ''};
-          ${mainAxis}: ${addUnit(this.data.barHeight) || ''};
+          ${vertical ? 'width' : 'height'}: ${addUnit(this.data.barHeight) || ''};
         `,
         barStyle: `
           ${mainAxis}: ${this.calcMainAxis()};