带有标签的离子2范围

Question

我希望将一些标签添加到离子2范围元素（可以在http://ionicframework.com/docs/docs/v2/api/components/range上找到该文档/range/）

您可以在开始和结束时使用以下标记

添加标签

    <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>

但是，如果可能的话，我想在整个范围内添加一些标签，以使其看起来更像是一个进度栏。因此，您可能有25％，50％等标签。

什么是一个好方法，而不会过多干扰离子HTML？

到目前为止，我的方法只是在范围上方创建一个离子行，然后使用CSS放置它。

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;
  }

在某种程度上确实有效，但是我认为可能有一种更好/更清洁的方法。

任何建议都很好。

谢谢！

Answer 1

不会设置pin =" true"（在范围滑块标签中）基本上做您想要的吗？它将显示滑块的当前值，就像进度条一样。

如果您希望在特定点上更多地在底部获得指定标签你要。

主要CSS问题将删除范围元素周围的填充或边距空间，然后在正确的位置获得"进度"的字体大小和间距。

例如

    <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

这可能为时已晚，但是对于将来的其他人来说，我将标签放在下面的标签中，并使用CSS来样式填充和宽度。

这是我的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>

和我的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;
}