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


#1

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 :
I already tried it like that .i copy this code of docs ionic

 <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>

Sorry … I copied the code wrong

This is what i get

I request your help … I need it to look the same as in the documentation

#####################################
I’m really sorry … I can not make you an answer because for some reason I was blocked.
If that you say is correct I am using the code that you gave me the one that is in the documentation … https://ionicframework.com/docs/api/components/range/Range/

But it does not really work I do not know what happens.
This is the last time I published my post: carlossuarezquintero@gmail.com … I do not know if you can help me with yours.

I really apologize for everything but I was blocked for some reason. I do not even know why I created this account … Thank you very much for your interest in helping me. I promise this is the last

Thank you all Thank you all Thank you all Thank you all Thank you all Thank you all Thank you all Thank you all Thank you all Thank you allThank you all Thank you all


#2

You need to provide us the actual markup you are using, here is the example markup from the ionic documentation:

<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>

Make sure you are setting dualKnobs="true"


#3

This should be:

dualKnobs="true"


#4

Do you mean you actually used the right code and still getting wrong results? Please clarify and post the actual code you are using in a new post, do not keep editing the original post as it becomes confusing.


#5

That’s weird but it’s okay. What I understand is that you are using the correct code as in the docs but still not getting the proper results. It should work though, may be you should show us the whole html and ts code you are using.


#6

Hello friend, I can respond … I am going to put my code which I use at the moment … thanks for your help. :frowning:

this mi page.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-range dual-knobs="true" pin="true" min="0" max="100" step="3" [(ngModel)]="knobValues" snaps="true"></ion-range>

> Do you mean you actually used the right code and still getting wrong results? Please clarify and post the actual code you are using in a new post, do not keep editing the original post as it becomes confusing.
this 

<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 .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;
knobValues:{
  upper:100,
  lower:50
}

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

  }

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

}

I am using the code that is in the documentation … but it really does not work

Do you mean you actually used the right code and still getting wrong results? Please clarify and post the actual code you are using in a new post, do not keep editing the original post as it becomes confusing. :slight_smile:
yes it’s true


#7

Hey @c_suarez4, I know it’s frustrating when such a simple thing doesn’t work, but I am afraid you’ve messed up the copy paste again and your html contains my comments too. I am not sure which code you are actually using so I am just guessing it’s the one with knobValues and that markup is wrong. It should be dualKnobs instead of dual-knobs.

If you want me to help you then please copy just the whole html and nothing else in a new post so that I am sure of your actual code.


#8

hi guy , Already create new topic this is url I need help with ” RANGE DUALKNOBS” IONIC2 thank u…
im :frowning:


#9

the solution is this thank u @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.