[Ionic2][RC0] always show ion-range pin

Ionic Framework ionic-v3
#1

Hi guys,

How do I always show the pin in ionic 2 (as opposed to the pin only showing when pressed)? In beta 11 what worked was to add the class ‘range-knob-pressed’ through ngClass. As of RC0 it doesn’t work anymore and I saw that now when you press the knob the class ‘range-pressed’ gets added to the ion-range. So I tried adding it through ngClass as follows:

<ion-range min="0" max="24" step="1" snaps="true" pin="true" [ngClass]="'range-pressed'">

However, this class gets overwritten by this line of code (I think) so it never makes it to the component.

What would be the proper way in RC0 to achieve this?

Thanks!

#2

Still looking for a solution, so bumping this to the top.

#3

this css would override that at the moment:

.range-md .range-pin {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform        : translate3d(0, 0, 0) scale(1);
}
2 Likes
#4

Hi! The 3dd13 it’s right but doesn’t work on iOS range. You can use this one: (place it on your scss file)

.range-md .range-knob-handle .range-pin {
  transform: translate3d(0, 0, 0) scale(1); }

.range-md:not(.range-has-pin) .range-knob-handle .range-knob {
  transform: scale(1); }

.range-ios .range-knob-handle .range-pin {
  transform: translate3d(0, 0, 0) scale(1); }

This will make your ionic range bubbles always visible :slight_smile:

6 Likes
#5

Working for me. Thanks gtamborero.

#6

Please help me, this is not working

#7

If you’re using an Ionic version and already uses CSS Shadow Parts then you can achieve this by using:

ion-range::part(pin) {
  transform: translate3d(0px, -24px, 0px) scale(1);
}
2 Likes
#8

This works, well. :+1:

#9

This worked for me too.