Изменение размера Div на основе динамического ввода

Question

Я пытаюсь создать окно фильтра поверх моей гистограммы на основе ввода с двойного ползунка справа внизу. Сначала я использовал подход svg, но это слишком сложно для моего углового приложения. Я переключился на сравнительно более простой подход, используя div в верхней части моей гистограммы и перемещая его слева направо или наоборот, основываясь на вводе с двойного слайдера. Я изо всех сил пытаюсь выяснить, как изменить размер div на основе значения из ползунка и переместить его слева направо. Я довольно новичок в том, что в целом являюсь разработчиком, поэтому я предполагаю, что у меня нет опыта, поэтому я не могу найти более разумный способ решения этой проблемы.

lowerSlider = document.querySelector('#lower');
upperSlider = document.querySelector('#upper');

@Input() lowerSliderMin = 0;
@Input() lowerSliderMax = 50;
@Input() upperSliderMin = 0;
@Input() upperSliderMax = 50;
@Input() rangeName;
@Input() filterId;

@Output() rangeValues: EventEmitter < any > = new EventEmitter();

lowerVal = 0;
upperVal = 50;

checkVals() {
  if (this.upperVal < this.lowerVal + 4) {
    this.lowerVal = this.upperVal - 4;

    if (this.lowerVal == this.lowerSliderMin) {
      this.upperVal = 4;
    }
  }

  if (this.lowerVal > this.upperVal - 4) {
    this.upperVal = this.lowerVal + 4;

    if (this.upperVal == this.upperSliderMax) {
      this.lowerVal = this.upperSliderMax - 4;
    }
  }

  this.EmitSliderValues();

}

EmitSliderValues() {
  let lowerVal = this.lowerVal;
  let upperVal = this.upperVal;
  let filterId = this.filterId;

  this.rangeValues.emit({
    filterId,
    lowerVal,
    upperVal
  });


}
colorchange() {
  const barchart = document.getElementById('bar-chart');
  const barchart_width = document.getElementById('bar-chart');
  const barchart_holder = document.getElementById('graph-holder');

  if (this.lowerVal > 0) {
    console.log(this.lowerVal);
    barchart_width.style.width = '50%'
    barchart_width.style.width += '-20px';
    barchart_width.style.backgroundColor = 'green';


  } else if (this.upperVal < 50) {
    console.log('the color doesn;t change');
    barchart_width.style.width = '40px';
    barchart.style.backgroundColor = 'blue';

  }
}

<div #barChart id="bar-chart" style="background-color: slateblue">
  <div id="graph-holder" style="background-color:yellow"></div>
</div>

<div class="multi-range">
  <input type="range" min="0" max="50" id="lower" [(ngModel)]="lowerVal" (change)="checkVals()" (click)="colorchange()">
  <input type="range" max="0" max="50" id="upper" [(ngModel)]="upperVal" (change)="checkVals()">
</div>

ОБНОВЛЕНИЕ: я полностью изменил свой подход, потому что перемещение div не работает. Я выбрал другой путь рисования «холст» под углом и все еще застрял. Мой код довольно прост, но я не могу понять проблему. пожалуйста помоги. новый код: `` import {Component, OnInit, Input} из '@ angular / core'; импортировать {ViewChild, ElementRef} из '@ angular / core'; import {Subscription} из 'rxjs';

         @Component({
         selector: 'app-canvas',
         templateUrl: './canvas.component.html',
         styleUrls: ['./canvas.component.css']
         })
         export class CanvasComponent implements OnInit {
         @ViewChild('myCanvas', {static: true}) myCanvas: ElementRef;
         public context: CanvasRenderingContext2D;

         constructor() { }

         ngOnInit() {
         let c = document.getElementById('myCanvas');
         let ctx = this.c.getContext('2d');
         this.ctx.rect(20,20,150,100);
         this.ctx.stroke();

         }
         }``

    undefined
    at  




 CanvasComponent.push../src/app/canvas/canvas.component.ts.CanvasComponent.ngOnInit (canvas.component.ts:21)
    at checkAndUpdateDirectiveInline (core.js:19341)
    at checkAndUpdateNodeInline (core.js:27597)
    at checkAndUpdateNode (core.js:27559)
    at debugCheckAndUpdateNode (core.js:28193)
    at debugCheckDirectivesFn (core.js:28153)
    at Object.eval [as updateDirectives] (BarChartComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:28145)
    at checkAndUpdateView (core.js:27541)
    at callViewAction (core.js:27782)

Answer 1

используйте ngStyle в div

<div class="my-div" [ngStyle]="{'width' : customWidth + 'px'}">
</div>

В машинописном тексте

customWidth = 20;

Answer 2

Просто дополнение к ответу выше, попробуйте поле margin-left и width

<div class="my-div" [ngStyle]="{'margin-left' : customWidth + 'px'}">
</div>