Ion-range value is always equal to zero

@ManelHK wrote:

Hello all,

I want to show the progress value in the ion-range but it’s always equal to the default value howerver the value retreived from the database is not usualy zero.
Another thing, I want to change the value in realtime by the event onChangeProgress($event) but it’s not working too.

This is my html file:

   <ion-item>
        <h6><b>Progress: {{progress}}%</b></h6>
      </ion-item>
 <ion-item>
        <ion-label floating ></ion-label>
        <ion-range min="0" max="100"  [(ngMdodel)]="rangeval" pin="true" color="secondary"(ngModelChange)="onChangeProgress($event)"></ion-range>
        <ion-icon slot="start" color="success" size="small" name="cellular-outline"></ion-icon>
        <ion-icon slot="end" color="success"  name="cellular"></ion-icon>
      </ion-item>

this is my TS

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { RestService } from '../rest.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-one-task',
  templateUrl: './one-task.page.html',
  styleUrls: ['./one-task.page.scss'],
})
export class OneTaskPage implements OnInit {
   _task: any = {};
  id=null;rangeval=0;progress:any;
  constructor(public api: RestService,
    public loadingController: LoadingController,
    public route: ActivatedRoute,
    public router: Router) { }
  async getonetask() {
    const loading = await this.loadingController.create({
      message: 'Loading',
      duration:2000
    });
    await loading.present();
    this.id=this.route.snapshot.paramMap.get('id');
    await this.api.getonetask(this.id)
      .subscribe(res => {
        console.log(res);
        this._task = res;
       this.rangeval=this._task.Progress;//value of ion-range
       this.progress= this.rangeval;//value of progress
        loading.dismiss();
      }, err => {
        console.log(err);
        loading.dismiss();
      });
  }
  onChangeProgress(){
    this.progress= this.rangeval;
  }
  ngOnInit() {
    this.getonetask();
  }

}

I hope you can help me soon.
Thanks

Posts: 1

Participants: 1

Read full topic