如何用ng樣式進度條

Question

我想用ng樣式製作一個進度條。問題是，當我製作它時，進度滑塊只能在中間進行，而不能覆蓋整個酒吧。進度條應該在幾小時內，例如：4小時，5小時等。當我使用％時，它可以工作。任何人都可以幫忙嗎？

這是我的代碼：

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