Ion-range value undefined

Ionic Framework ionic-v3
1

Hey guys I just wanted to create a form which uses a range from 1-5 but when i want to access the value it is undefined.
Do u know what i am doing wrong?
Code:

<form (ngSubmit)="logForm()">
          <!-- Testfall 1 (1-5) -->
          <ion-item>
            <ion-label text-wrap>Das ist eine sehr lange Frage die sich nicht in einer Zeile ausgeht?</ion-label>
            <ion-range min="1" max="5" step="1" snaps="true" color="secondary" id="kindofquestionOne_1">
              <ion-label range-left>1</ion-label>
              <ion-label range-right>5</ion-label>
            </ion-range>
          </ion-item>
          
        </form>

Try to Access the value:

logForm(){
    console.log(document.getElementById("kindofquestionOne_1").value);
  }
2

You can try like this

<form (ngSubmit)="logForm()">
          <!-- Testfall 1 (1-5) -->
          <ion-item>
            <ion-label text-wrap>Das ist eine sehr lange Frage die sich nicht in einer Zeile ausgeht?</ion-label>
            <ion-range min="1" max="5" step="1" snaps="true" color="secondary" id="kindofquestionOne_1" (ionChange)="onChange($event)">
              <ion-label range-left>1</ion-label>
              <ion-label range-right>5</ion-label>
            </ion-range>
          </ion-item>
          
        </form>

ts.

         onChange(ev: any) {
        console.log(ev)
}

I hope your problem will be fixed.
Thank you

3

thx, this is not exactly what i was looking for but it is a nice workaround :smile:

4

Use ngModel. There’s an example in the docs

it omits an important piece of info, adding the ngModel property to your component.

export class RangePage {
rangeValue: number;
 constructor() {
  this.rangeValue = 1;
  }
}

Set rangeValue to whatever you want. I used 1 because it’s your minimum value. And of course, name rangeValue whatever you want too.

@flycoders_sourav had the right idea with ionChange, but you can leave the event reference out of the picture and just console.log this.rangeValue in the function.

2 Likes
5

thx for ur answer!
It seems to be a really nice solution, but to be honest, this is my first application with ionic and angular js and cause of that i have really little knowledge about ng-model.
How can i connect your code with my ion-range?

6

which one you want to connect?

7

if you want connect to this one
please try like this

export class RangePage {
rangeValue: number;
 constructor() {
  this.rangeValue = 1;
  }
}

<ion-range min="1" max="5" step="1" snaps="true" color="secondary" id="kindofquestionOne_1" [(ngModel)]="rangeValue">

i hope your problem will be fixed
Thank you.

1 Like
9

Never do this. The whole point of using a framework like Angular is that you let it do the DOM manipulation for you.

10

Yeah it works fine thx :slight_smile:

Thank you for your help !

I would be replying faster but this happens :joy::
image

11

If its work fine please mark the solution

12

Glad it worked out. I’d suggest going through
https://angular.io
and at the least, do the hall of heroes tutorial. I waited until I had been programming for a year and a half to do so and I’m kicking myself for it. Fantastic documentation.