[SOLVED] Bug in Ionic2 range dualKnobs="true"

Ionic Framework ionic-v3
1

I’m using the latest Ionic version. in my Ionic2 project I build a form with FormBuilder. The normal range slider works fine, however the dualKnobs version does not return any values.

In the constructor of my class I declare the form fields like this:

this.userProfileForm = fb.group({  
        'lookingForAge': [''],
        'lookingForRadius': ['50', Validators.compose([Validators.required])],
});
  
this.lookingForAge = this.userProfileForm.controls['lookingForAge'];
this.lookingForRadius = this.userProfileForm.controls['lookingForRadius'];

In my template for debug purposes I show the values using

<h1>{{lookingForRadius.value | json}}</h1>
<h1>{{lookingForAge.value | json}}</h1>

the first line shows the value "50". the second line shows “”… when I use the dualKnow slider, it shows

{ "lower": null, "upper": null }

Maybe I’m missing something here, but I think this is a bug.

2

It’s not a bug, but I did not understand the docs regarding dual knob slider. In case someone else has the same problem when using range sliders with formbuilder.

When you set your form fields, you need to specifiy a default value. With dual knob slider you have to set an object as default value. If you pass an empty string ‘’ like I did it will fail and return null all the time.

So for for example

this.userProfileForm = fb.group({  
    'lookingForRadius': ['50', Validators.compose([Validators.required])],
    'lookingForAge': [{lower: 18, upper: 60}],
});
3

Could you send the code for your dualknobs? My project does not work … thanks