Ionic2, ion-range custom content of the range pin

user_8364822 0
Viewed 2951

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>
ionic2 ionic-framework
2 Answers

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.

user_92846460
Related