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(