Merge pull request #222 in YR/star-web-components from star-slider-dot to master

* commit '6fbebc4d5454b7aef071522b731edd9518fbf866':
  BUG: #151665 解决声音音量调节显示错误

src/components/slider/slider-styles.ts

@@ -3,7 +3,7 @@ export const sharedStyles: CSSResult = css`
   :host {
     --cover-width: 0;
     --dot-move: 0;
-    --vWidth: var(--auto-16px);
+    --vWidth: var(--auto-8px);
     --vHeight: var(--auto-340px);
   }
   .content {
@@ -45,13 +45,18 @@ export const sharedStyles: CSSResult = css`
     height: var(--cover-width);
     left: 0px;
     bottom: 0px;
-    border-radius: 0 0 20px 20px;
+    border-radius: 0 0 var(--auto-20px) var(--auto-20px);
     background: #404040;
   }
+  #inner {
+    width: 96%;
+    background: none;
+  }
   .progress {
     width: var(--cover-width);
     height: var(--auto-6px);
     background: #4d4d4d;
+    border-radius: var(--auto-5px);
   }
   .dot {
     position: absolute;

src/components/slider/slider.ts

@@ -25,6 +25,7 @@ export class StarSlider extends LitElement {
   @query('.v-sliderBar') vSliderBar!: HTMLDivElement
   @query('.v-progress') vProgress!: HTMLDivElement
   @query('.dot') dot!: HTMLDivElement
+  @query('#inner') inner!: HTMLDivElement
   @query('p') p!: HTMLParagraphElement
 
   @property({type: Boolean}) disabled = false
@@ -92,8 +93,10 @@ export class StarSlider extends LitElement {
           <slot name="l-icon"></slot>
           <slot name="r-icon"></slot>
           <div class="sliderBar">
-            <div class="progress"></div>
-            <div class="dot"></div>
+            <div class="sliderBar" id="inner">
+              <div class="progress"></div>
+              <div class="dot"></div>
+            </div>
           </div>
         </div>
       `
@@ -164,7 +167,7 @@ export class StarSlider extends LitElement {
         }
       } else {
         this.style.setProperty('--dot-move', this.proportion + '%')
-        this.style.setProperty('--cover-width', this.proportion + '%')
+        this.style.setProperty('--cover-width', this.proportion + 1 + '%')
       }
       // 重新初始化防止滑块增量
       this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标
@@ -197,7 +200,7 @@ export class StarSlider extends LitElement {
       this.endValue = Math.ceil(this.proportion) + ''
       if (!this.tick) {
         this.style.setProperty('--dot-move', this.proportion + '%')
-        this.style.setProperty('--cover-width', this.proportion + '%')
+        this.style.setProperty('--cover-width', this.proportion + 1 + '%')
       } else {
         // tick跳格滑动
         var tickStep = 100 / parseInt(this.step) //分为几格