I need help with get y view DATA OF RANGE DUALKNOBS IONIC2

Ionic Framework ionic-v3
1

Hello boy what you are looking for is that I can show and get the data of my ion range Dual knobs … something like this is what I am looking for.

I’m looking for something like that. And that of course it can obtain in variables to later manipulate.The objective is to display the data on the screen and obtain the data so that they are then sent to a service to consult the api
Thanks u
image
I currently have this
image

this is mi code html

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

this is mi 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: any = {
  upper:100,
  lower:50
}

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

  }

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

}

I want to thank the people who helped me in the previous case @KishuPro

1 Like
2

If you want to show the values like that then you’ve to put the <ion-range> inside its own <ion-list> and use the <ion-list-header> for the labels. Within this <ion-list-header>, you’ve to use <ion-badge> to show the actual values. Do try to learn about these from the documentation, for now though, I am giving you some example code you can learn from and use:

<ion-list>
    <ion-list-header color="light">
      STRUCTURE
      <ion-badge item-end>{{ knobValues.lower }}</ion-badge>
      <ion-badge item-end>{{ knobValues.upper }}</ion-badge>
    </ion-list-header>
    <ion-item>
      <ion-range dualKnobs="true" pin="true" min="0" max="100" step="5" [(ngModel)]="knobValues" snaps="true">
        <ion-label range-left>0</ion-label>
        <ion-label range-right>100</ion-label>
      </ion-range>
    </ion-item>
</ion-list>