两种方式绑定ngStyle

Question

Im trying to make ngStyle change its left field value whenever i change something to my range value .

i was inspired by how its done on: https://codepen.io/mayuMPH/pen/ZjxGEY but im not finding a way to do this in angular6-7.

only when the document is loaded the left ngStyle value will change. but i dont get it to work when i drag the range. how can i achieve the rs-bullet to follow the value?

html code:

<div class="container">
  <div class="range-slider">
    <span id="rs-bullet" [ngStyle]="{'left':RangePos}"   (change)="changeZoom()" class="rs-label" >{{ rangeValue }}</span>
    <input id="rs-range-line" [(ngModel)]="rangeValue" class="rs-range" type="range" value="0" min="0" max="100">

  </div>

  <div class="box-minmax">
    <span>0</span><span>200</span>
  </div>



</div>

component:

  rangeValue = 0;
  RangePos = ((40 / 1000) * 578) + 'px';

  ngOnInit() {






  }

  changeZoom() {
    this.RangePos = ((this.rangeValue / 1000) * 578) + 'px';
  }

Answer 1

You cannot use change on span because there is no such event on it. Actually, you don't even need it, because ngModel should handle all the changes.

So, to make your example working you should just change

changeZoom() {
    return ((this.rangeValue / 1000) * 578) + 'px';
}

and

<span id="rs-bullet" [ngStyle]="{'left': changeZoom()}" 
      class="rs-label" >{{ rangeValue }}
</span>

Also divider 1000 in your example is incorrect because you input range max value is 100.

Here you can see your example, working in Angular: https://stackblitz.com/edit/angular-66fr5v .

Be sure, that you've added FormsModule to the application module. Otherwise ngModel will not work.

Answer 2

Can you try to set a function to bind Style like this?

<span id="rs-bullet" [ngStyle]="setRangePosStyles(RangePos)" (change)="changeZoom()" class="rs-label" >{{ rangeValue }}</span>

component:

setRangePosStyles(RangePos){
        return {'left':RangePos};
    }