CODEWITHSUNDEEP
ionic-frameworkionic2
Nikola Noxious Dimitrov
Nikola Noxious Dimitrov

Reputation: 265

Ionic2, ion-range custom content of the range pin

I am using ion-range with pin and steps. I get the current value in the range pin, but I want to add/append some text next to it.

So far in ionic API and docs I did not find a way to modify the content from the range pin, so I am thinking on maybe appending a span via the code, but so far I know to use .append() function from jQuery. The html of the range pin is:

<div class="range-pin" role="presentation">1</div>

So I want to show it like:

<div class="range-pin" role="presentation">1 item</div>

Upvotes: 3

Views: 3051

Answers (2)

Raymond Davis
Raymond Davis

Reputation: 46

This was my solution.

Note: I put this inside ionViewDidEnter.

this._elementRef.nativeElement
  .querySelector('.range-knob-handle')
  .addEventListener('pointermove', function () {
    const value = this.getAttribute('aria-valuenow');
    this.querySelector('.range-pin').textContent = `${value} hours`;
  });

So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.

Upvotes: 3

ANGOmarcello
ANGOmarcello

Reputation: 101

I know it is a bit late but if anyone comes across this question, I have found the following solution:

HTML

<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>

See how I added an id called euroRange to my ion-range element.

CSS

#euroRange {
    .range-pin:after {
        content: " €";
    }
}

Inside of the euroRage id I added .range-pin:after which means that whatever I specify should be done directly after the normal content of the pin.

With content I added a space and the € symbol.

Here is the result.

Upvotes: 10

Related Questions