Div resizing based on dynamic input

Question

I'm trying to create filter window on top of my bar graph based on the input from the double slider right below. I initially took the svg approach but that is way too complicated for my angular app. I switched to comparatively simpler approach using a div on top of my bar graph and moving it left to right or vice versa based on the input from the double slider. I'm struggling to figure out how to resize the div based on the value from the slider and move it left to right. I am fairly new to overall being a developer so I'm guessing its my lack of experience which is why I can;t figure out a smarter way to approach this problem.

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>

UPDATE: I totally changed my approach b/c moving a div is not working. I took another road of "canvas' drawing in angular and am still stuck . My code is fairly simple but I'm unable to understand the problem. please help. new code is: `` import { Component, OnInit, Input } from '@angular/core'; import { ViewChild, ElementRef } from '@angular/core'; import { Subscription } from '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

Just addition to above answer, try margin-left and width property

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

Answer 2

use ngStyle on the div

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

In typescript

customWidth = 20;