CODEWITHSUNDEEP
ionic-frameworkionic3
Yovhi
Yovhi

Reputation: 610

insert ion-range value inside ion-range knob

im trying to build custom ion-range like this: enter image description here

question is, how insert ion-range value inside ion-range knob ?

i'm using ionic v3, here my code

<ion-item>
<ion-label>step=100, snaps, </ion-label>
<ion-range min="0" max="10" step="1" snaps="true" color="secondary" 
[(ngModel)]="singleValue4">
</ion-range>

here my result :

enter image description here

Upvotes: 0

Views: 1128

Answers (1)

Yovhi
Yovhi

Reputation: 610

solved with modification scss, here my code

<ion-item>
<ion-label>step=100, snaps, </ion-label>
<ion-range min="0" max="10" step="1" snaps="true" pin="true" color="secondary" [(ngModel)]="singleValue4"></ion-range>


.range-md .range-pin {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform        : translate3d(0, 0, 0) scale(1);
    top: 10px;
    z-index: 999;
    background: transparent;
    transform: rotate(0);
}

.range-md .range-pin::before
{
    border-radius: 50% !important;
    transform: rotate(0);
}

here my result :

enter image description here

Upvotes: 1

Related Questions