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)

Dilshan Liyanage · Accepted Answer · 2019-07-10 05:17:33Z

2

use ngStyle on the div

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

In typescript

customWidth = 20;

answered Jul 10, 2019 at 5:17

Dilshan Liyanage

4,6082 gold badges36 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fahzsh Over a year ago

thanks but it doesn't work for me, I want this div to move left to right or right to left dynamically based on my slider input. :(

Dilshan Liyanage Over a year ago

Still ngStyle is your answer. Now play with the left and right values using ngStyle. .my-div { background: red; width: 100px; height: 100px; position: absolute; right: 0; left: 0 }

Sarath Mohandas · Accepted Answer · 2019-07-10 05:29:57Z

0

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

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

answered Jul 10, 2019 at 5:29

Sarath Mohandas

5361 gold badge10 silver badges35 bronze badges

1 Comment

fahzsh Over a year ago

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.

Collectives™ on Stack Overflow

Div resizing based on dynamic input

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related