I need help with ” RANGE DUALKNOBS” IONIC2

[c_suarez4]

Hi guys,I have little programming in ionic … about 2 months .I use Ionic 2; and I am trying to use in my project a RANGE with feature DUALKNOBS but I did not make it work . I apologize if my English is not very good .

this is my code HTML :

<ion-header>

  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <img  src="assets/images/logovival50.png" style="display: block; width: 50%; height: auto; margin-left: auto; margin-right: auto;">
<!-- FORMULARIO -->
  <ion-list no-lines padding-top >
    
     <ion-item class="iblack">
        <ion-label>Ubicación</ion-label>
            <ion-select [(ngModel)]="gaming">
              <ion-option value="nes">Norte De santander</ion-option>
              <ion-option value="n64">Patios</ion-option>
              <ion-option value="ps">Villa Del Rosario</ion-option>
              <ion-option value="genesis">Tibu</ion-option>
            </ion-select>
      </ion-item>
      <div id="spacer" style="height:10px;"></div>

      <ion-item class="iblack">
        {{text}}
                <ion-range min="21" max="72" step="3" snaps="true" [(ngModel)]="dual"></ion-range>
      </ion-item>
<div id="spacer" style="height:10px;"></div>
       <ion-item>
    <ion-label>dual, step=3, snaps, </ion-label>
    <ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>
  </ion-item>


    </ion-list>
    <button ion-button block round class="boton" (click)="Login($event)" >Iniciar Sesión</button>

</ion-content>

This is my code .ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the BuyPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-buy',
  templateUrl: 'buy.html',
})
export class BuyPage {
dual :any;
text:1;
knobValues:{
  upper:100,
  lower:50
}

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.dual = this.dual;

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad BuyPage');
  }

}

This is my code now And this is my result. I am copying the code from the documentation but it still does not work. @KishuPro

[KishuPro]

Okay, got it. Do exactly as I am saying as follows:

In your html code, replace the following line:

<ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>

with this:

<ion-range dualKnobs="true" [(ngModel)]="knobValues" min="21" max="72" step="3" snaps="true"></ion-range>

And in your ts file, replace the following code:

knobValues:{
  upper:100,
  lower:50
}

with this:

knobValues: any = {
  upper:100,
  lower:50
}

It should work now.

[c_suarez4]

thanks u … work … thank you very much …

NOTE: Some things how to get the values ​​and how to emulate the range on screen should I create another message

[KishuPro]

You are most welcome!

Yes please create a new question if you need to ask something else, may be someone else who has the knowledge might want to chip in.