ng-style로 막대 진행 방법

Question

ng 스타일로 진행 막대를 만들려고합니다. 문제는 내가 그것을 만들 때 진행 슬라이더가 중간에 지나서 전체 막대를 덮지 않는다는 것입니다. 진행 막대는 4h, 5h 등과 같이 시간 단위 여야합니다. %로 만들면 작동합니다. 아무도 도와 줄 수 있니?

이 내 코드입니다 :

<div class="progress-bar progress-bar-slider"> 
        <input class="progress-slider" type="range" min="4" max="12" ng-model="workingHoursSelectedRange"> 
        <div class="inner" ng-style="{width: workingHoursSelectedRange + '%' }"></div> 
       </div> 

jsfiddle : https://jsfiddle.net/f6h32sfx/

Answer 1

Try This it will help you   


<style> 
    .progress-box { 
    width: 100%; 
    } 

    .progress-box .percentage-cur .num { 
    margin-right: 5px; 
    } 

    .progress-box .progress-bar { 
    width: 100%; 
    height: 12px; 
    background: #f2f1f1; 
    margin-bottom: 3px; 
    border: 1px solid #dfdfdf; 
    box-shadow: 0 0 2px #D5D4D4 inset; 
    position: relative; 
    } 

    .progress-box .progress-bar .inner { 
    position: relative; 
    width: 0; 
    height:100%; 
    background: #239bd6; 
    } 

    .progress-bar .inner { 
    height: 0; 
    width: 0; 
    transition: all 1s ease-out; 
    } 

    .progress-bar-slider .inner { 
    transition: none; 
    } 

    .progress-bar-slider .inner:after { 
    content: " "; 
    width: 5px; 
    height: 14px;; 
    background-color:#ccc; 
    position: absolute; 
    right: -2px; 
    top: -2px; 
    border: 1px solid #bbb; 
    border-radius: 2px; 
    box-shadow: 0px 0px 2px rgba(0,0,0,0.3); 
    margin: 0px; 
    } 

    .progress-slider { 
    opacity: 0; 
    width: 100%; 
    height: 15px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    cursor: pointer; 
    z-index: 1; 
    } 

    </style> 



    <ul> 
      <li class="title"><h4> Progress slider</h4></li> 
      <li class="desc-frame"> 
      <div class="progress-box" > 
       <div class="progress-bar progress-bar-slider"> 
       <input class="progress-slider" type="range" min="0" max="100" ng-model="vm.progress"> 
       <div class="inner" ng-style="{ width: vm.progress + '%' || '0%' }"></div> 
       </div> 
       <br> 
       <div class="percentage-cur" ng-init="vm.progress=vm.progress ? vm.progress : 0"> 
       <span class="num" ng-model="vm.progress">{{ vm.progress }}%</span> 
       </div> 
      </div> 
      </li> 
      </ul>