可点击的进度条

我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条（这是我能做到的最好的）。

有没有办法将滑块放置在进度条内但不干扰进度可视化？

堆栈闪电战 https://stackblitz.com/edit/angular-jjb7gh?file=src%2Fapp%2Fapp.component.ts

HTML

<div class="progress aqua" data-width="0%">
    <div class="progress-text">0%</div>
    <div class="progress-bar">
        <div class="progress-text">0%</div>
    </div>
</div>

<input class="slider" id="slider" type="range" name="slider" min="0" max="100" value="0">

成分

myfuction(){

$(document).ready(function( $ ) {


    $('#slider').on('input',function(e) {
        $('.progress-bar').css('width',(e.target  as HTMLInputElement).value + '%');
    });

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type == 'attributes' && mutation.attributeName == 'style') {
            var el   = (mutation.target as HTMLInputElement);
            var width  = el.style.width; 
            var $parentEl =$(el).parent('.progress');
            $parentEl.attr('data-width',width);
            $parentEl.find('.progress-text').text(width);
        }
      });
    });

    // configuration of the observer
    var config = {
        attributes: true,
        attributeFilter: ['style'],
        childList: false,
        characterData: false
    };

    $('.progress-bar').each(function(e) {
        // pass in the target node, as well as the observer options
        observer.observe(this, config);
    })
});
}

Image https://i.stack.imgur.com/Ugh1u.png

目标是通过点击来增加进度，即使我使用滑块来做到这一点，但如果可以删除滑块并使进度条功能更好。

只是不要使用HTMLInputElement但听鼠标事件并自己计算百分比。

In your 组件.ts添加以下功能：

private updateSliderToggle:boolean = false;

startUpdateSlider() {
  this.updateSliderToggle = true;
}

endUpdateSlider() {
  this.updateSliderToggle = false;
}

updateSlider(event) {
  if (this.updateSliderToggle) {
    let percentage:number = Math.floor(event.layerX / (event.target.offsetWidth - 3) * 100);

    // Might happen, as we set the max to -3 to reach 100% easier.
    if (percentage > 100) {
      percentage = 100;
    } else if (percentage < 0) {
      percentage = 0;
    }

    console.log(event);
    console.log(event.layerX, event.target.offsetWidth);
    $('.progress-bar').css('width', percentage + '%');
  }
} 

而在你的组件.html将您的标记更改为

<div class="progress aqua" data-width="0%" (mousedown)="startUpdateSlider()" (mouseup)="endUpdateSlider()" (mouseleave)="endUpdateSlider()" (mousemove)="updateSlider($event)" >
  <div class="progress-text">0%</div>
  <div class="progress-bar">
    <div class="progress-text">0%</div>
  </div>
</div>

这里有一个工作堆栈闪电战 https://stackblitz.com/edit/angular-w4tfz5