JSFiddle - React, Tailwind, and code Playground

HTML

<div np-app="budget" ng-controller="BudgetHomeOfficeController">
<div class="progress-box" style="border: none;">
                <div class="percentage-cur" >
                    <span class="num" ng-bind="workingHoursSelectedRange"></span>
                </div>
                <div class="progress-bar progress-bar-slider">
{#                    <input class="progress-slider" type="range"  max="12" ng-model="workingHoursSelectedRange">#}
                    <input class="progress-slider" type="range" min="4" max="12" ng-model="workingHoursSelectedRange">
                    <div class="inner" ng-style="{width: workingHoursSelectedRange + '%' }"></div>
                </div>
            </div>
</div>

CSS

.progress-box {

  margin-left: 40px;
  min-width: 240px;
  position: relative;
  top: 8px;
  border: none;
}

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

JavaScript

var app = angular.module('budget', []);

app.controller('BudgetHomeOfficeController', ['$scope', '$log', function ($scope, $log) {

$scope.workingHoursSelectedRange = 4;

}]);