3

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>
Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
Nikola Noxious Dimitrov
  • 265
  • 3
  • 17

2 Answers2

10

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.

ANGOmarcello
  • 101
  • 1
  • 7
3

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.

Raymond Davis
  • 46
  • 2