Ionic 2 Range With Labels - html

Question

I am looking to add some labels to an Ionic 2 range element (the documentation for which can be found at http://ionicframework.com/docs/v2/api/components/range/Range/)
You can add a label at the beginning and end using the following markup
<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
<!-- Setting the labels here -->
<ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
I would however like to add some labels throughout the range, on either side if possible in an attempt to make it look more like a progress bar. So you might have labels like 25%, 50% etc ..
What would be a good way to approach this, without interfering too much with the Ionic HTML?
My approach so far is just to create an ion-row above the range, then use css to place it.
HTML
<!-- TIMELINE -->
<div class='timeline'>
<ion-grid class="timeline-grid">
<ion-row class="timeline-labels">
<ion-col width-20>Label One</ion-col>
<ion-col width-20>Label Two</ion-col>
<ion-col width-20>Label Three</ion-col>
<ion-col width-20>Label Four</ion-col>
<ion-col width-20>Label Five</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-range color='secondary' [(ngModel)]="progress">
</ion-range>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
CSS
ion-row.timeline-labels {
padding-left: 20px;
z-index: 1;
position: absolute;
top: 10px;
}
Which does in a way work, however I am thinking there is maybe a better/cleaner way to go about it.
Any advice would be great.
Thanks!

Answer 1

Wouldn't setting the pin="true" (in the range slider tag) basically do what you want?
It would show the current value of the slider like a progress bar would.
If you are looking to achieve more of a specified label at the bottom at specific points I think the best way would be to add a div with spans directly below the range slider and then toy with the CSS till its close enough to what you want.
main css issues will be removing padding or margin space around the Range element, and then getting the font size and spacing of the 'progress' in the right spots.
eg.
<ion-range min="0" max="100" pin="true">
<!-- Setting the labels here -->
<ion-label range-left>0</ion-label>
<ion-label range-right>100</ion-label>
</ion-range>
<div>
<span>20%<span>
<span>40%<span>
<span>80%<span>
<span>100%<span>
</div>

Answer 2

This might be too late but for others looking in the future I put my labels inside of spans within a label below and used css to style the padding and width.
Here is my HTML:
<div class="slide-rating">
<ion-range min="1" max="4" step="1" snaps="true" ticks="false" ></ion-
range>
<ion-label class="rating-labels">
<span> Beginner </span>
<span> Casual </span>
<span> Advanced </span>
<span> Expert </span>
</ion-label>
</div>
And my CSS:
span{
color: #354D37;
font-family: Gotham-Book;
font-size: small;
padding-left: 12px;
}
.slide-rating{
align-items: center;
width: 80%;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating-labels{
margin-left: -5%;
margin-right: -5%;
text-align: center;
}