angularjs - How to progress bar with ng-style -


i trying make progress bar ng-style. problem that, when make it, progress slider goes middle, , not cover whole bar. progress bar should in hours, like: 4h, 5h etc. when make %, works. 1 help?

this code:

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

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

-

Comments

Post a Comment

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more