Ionic 2 Range: Value to Text

Question

I would like to convert my "Range" value to a Text.

As example if the Range reaches "100" the "Pin" and the "Value '{{train}}'" shouldn't show "100" it should show "OneHundred".

This is my Code so far.

HTML:

          <ion-item>
            <ion-range min="0" max="400" pin="true" step="100" snaps="true"  [(ngModel)]="train" color="secondary">

            </ion-range>
          </ion-item>
<span>{{train}}</span>

TS (using this to set the default range):

export class MyFancyClass {
train = 200;
}

I hope someone can help me out! Thanks already.

https://stackoverflow.com/questions/14766951/convert-digits-into-words-with-javascript — Suraj Rao, Jun 12 '17 at 05:21
Thank you, ill take a deeper look into it. But im not using Javascript, so it makes it a bit difficult for me since im pretty new to Typescript. — CupOfTea, Jun 12 '17 at 05:27
typescript is a superset of javascript.. it just has strict type checking — Suraj Rao, Jun 12 '17 at 05:27

score 1 · Answer 1 · answered Jun 12 '17 at 05:24

1

You can install this npm package

https://www.npmjs.com/package/number-to-text

And it also supports multiple languages

Example:

var numberToText = require('number-to-text')
require('number-to-text/converters/en-us'); // load converter 

numberToText.convertToText('123456') 
//One Hundred Twenty Three Thousand, Four Hundred Fifty Six

On Given link there are lots of examples.

answered Jun 12 '17 at 05:24

Vivek Doshi

56,649
12
110
122

That worked, but there is a misunderstanding. I want to configure it by myself with an array. Like if the range value = 100 the pin should output MY FANCY TEXT and if the value reaches 200 then the pin should output a different text. – CupOfTea Jun 30 '17 at 17:35

CupOfTea · Accepted Answer · 2017-07-01T13:49:08.220

I fixed it. (note i used a plugin for icons so these should usually not work for you if you don't have them installed in your app):

<i primary range-left class="fa fa-bicycle"></i>
<i primary range-right class="fa fa-train"></i>

HTML:

        <ion-list-header>
          <ion-badge item-right>{{ trainvalue }}</ion-badge>
        </ion-list-header>
        <ion-item>
          <ion-range min="0" max="400" pin="false" step="100" snaps="true" [(ngModel)]="train" color="primary" (ngModelChange)="onChangeTrain($event)">
            <i primary range-left class="fa fa-bicycle"></i>
            <i primary range-right class="fa fa-train"></i>
          </ion-range>
        </ion-item>

TS:

    export class MyFancyClass {
                train = 200;
                trainvalue: any;
                textChangeTrain: any;
                }
    constructor(public navCtrl: NavController, public navParams: NavParams) {
               this.textChangeTrain = ["Not Important", "Not that Important", "Neutral", "Important", "Very Important"];
               this.trainvalue = this.textChangeTrain[2];
            }


onChangeTrain() {
            if (this.train == 0) { this.trainvalue = this.textChangeTrain[0] }
            if (this.train == 100) { this.trainvalue = this.textChangeTrain[1] }
            if (this.train == 200) { this.trainvalue = this.textChangeTrain[2] }
            if (this.train == 300) { this.trainvalue = this.textChangeTrain[3] }
            if (this.train == 400) { this.trainvalue = this.textChangeTrain[4] }
        }

How it works: This checks if the Range is being used.

(ngModelChange)="onChangeTrain($event)"

This is the function of it. If the Range is on the value "0" then we call this.trainvalue from the {{trainvalue}} it will check the array for the correct number and replaces it with text.

onChangeTrain() {
if (this.train == 0) { this.trainvalue = this.textChangeTrain[0] }

This is used to declare our values. train = 200; sets the Range to default 200 value, trainvalue:any; gives us the ability to do anything with this value same with textChangeTrain: any;

train = 200;
trainvalue: any;
textChangeTrain: any;

Here we are adding the Array and setting the trainvalue to [2] wich means we set it to 200 but we write [2] because we are calling it from the array.

this.textChangeTrain = ["Not Important", "Not that Important", "Neutral", "Important", "Very Important"];
this.trainvalue = this.textChangeTrain[2];
}

I hope this will help someone in the future, happy coding.

Ionic 2 Range: Value to Text

2 Answers2