From 72908cb0a12766387119d6e3fd4caae14899ecc2 Mon Sep 17 00:00:00 2001
From: wurou <wurou@yhkylin.cn>
Date: Sun, 9 Oct 2022 13:52:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=AE=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E6=BB=91=E5=8A=A8=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../brightness-slider/brightness-slider.ts      | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/brightness-slider/brightness-slider.ts b/src/components/brightness-slider/brightness-slider.ts
index df5546e..f8ec79a 100644
--- a/src/components/brightness-slider/brightness-slider.ts
+++ b/src/components/brightness-slider/brightness-slider.ts
@@ -12,6 +12,7 @@ export class BrightnessSlider extends LitElement {
   @property({type: Number}) barWidth = 0
   @property({type: Number}) max = 100
   @property({type: Number}) _value = 1
+  @property({type: Number}) progressLen = 0
   @property() touchAction = {
     // 触摸开始落点
     start: {
@@ -47,7 +48,7 @@ export class BrightnessSlider extends LitElement {
 
   set value(value: number) {
     this._value = value
-    let len = Math.floor((value * this.sliderBar.offsetWidth) / this.max)
+    let len = Math.round((value * this.sliderBar.offsetWidth) / this.max)
     this.coverLen = len.toString()
   }
 
@@ -169,25 +170,27 @@ export class BrightnessSlider extends LitElement {
       case 'touchstart':
         this.touchAction.start.clientX = event.touches[0].clientX
         this.barWidth = this.sliderBar.offsetWidth
+        this.progressLen =
+          this.touchAction.start.clientX -
+          this.sliderBar.getBoundingClientRect().left
         break
       case 'touchmove':
+        event.preventDefault()
         this.touchAction.last.clientX = event.touches[0].clientX
         this.distance =
           this.touchAction.last.clientX - this.touchAction.start.clientX
-        this.currentDistance = this.distance + this.progress.offsetWidth
-
+        this.currentDistance = this.distance + this.progressLen
         if (this.currentDistance < this.barWidth / this.max) {
-          // this.currentDistance = 0;
-          this.currentDistance = this.barWidth / this.max
+          this.currentDistance = Math.round(this.barWidth / this.max)
         }
 
         if (this.currentDistance > this.barWidth) {
           this.currentDistance = this.barWidth
         }
-        this.progress.style.setProperty('width', this.currentDistance + 'px')
+        this.coverLen = this.currentDistance.toString()
         break
       case 'touchend':
-        this.value = Math.floor(
+        this.value = Math.round(
           (this.currentDistance * this.max) / this.barWidth
         )
         this.dispatchEvent(