이온 2 범위 레이블

Question

나는 다음과 같은 마크 업을 사용하여 시작과 끝에 라벨을 추가 할 수 있습니다

(대한 문서가 http://ionicframework.com/docs/v2/api/components/range/Range/에서 찾을 수 있습니다) 이오니아 2 범위 요소에 약간의 레이블을 추가 찾고 있어요 나는 그러나 가능하면 시도 양쪽에, 범위에 걸쳐 일부 레이블을 추가 할

<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 % 등과 같은 레이블을 가질 수 있습니다.

Ionic 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

기본적으로 핀을 "true"(슬라이더 태그 범위에서)로 설정하지 않으시겠습니까? 진행률 표시 줄처럼 슬라이더의 현재 값이 표시됩니다.

특정 지점의 하단에서 지정된 레이블을 더 많이 얻으려는 경우 가장 좋은 방법은 범위 슬라이더 바로 아래에있는 범위로 div를 추가 한 다음 CSS가 충분히 근접해있을 때까지 장난감을 추가하는 것입니다. 당신이 원하는.

주요 CSS 문제는 Range 요소 주변의 여백 또는 여백 공간을 제거한 다음 글꼴 크기 및 오른쪽 스팟의 '진행률'간격을 가져옵니다.

예 :

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