I need help with ” RANGE DUALKNOBS” IONIC2


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-content padding>
    <img  src="assets/images/logovival50.png" style="display: block; width: 50%; height: auto; margin-left: auto; margin-right: auto;">
  <ion-list no-lines padding-top >
     <ion-item class="iblack">
            <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>
      <div id="spacer" style="height:10px;"></div>

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

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


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.
  selector: 'page-buy',
  templateUrl: 'buy.html',
export class BuyPage {
dual :any;

  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

I need help with " RANGE DUALKNOBS" not found in my project

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:


with this:

knobValues: any = {

It should work now.


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


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.