优化亮度条滑动效果

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(