JSFiddle - React, Tailwind, and code Playground

by Anik Islam Abhi

HTML

<div class="slider-container input-group" ng-repeat="slider in sliders"> 
    <span class="input-group-addon">
	    <input type="checkbox" id="{{'ck-' + slider.id}}" ng-model="slider.checked">
	</span>
    <rangebar rangeid="{{'sl-' + slider.id}}" date="dt" ng-disabled="slider.checked" values="{{slider.hours}}"></rangebar>
</div>

JavaScript

var dayviewer = angular.module("dayviewer", ['ui.date']).
    directive('rangebar', function() {
        return {
            restrict: "AEC",
            template: '<div class="form-control" id="{{rangeid}}"></div>',
            replace:true,
            scope: {
                values: '@',
                date: '='
            },
            link: function($scope, $element, $attributes) {
                $scope.rangeid= $attributes.rangeid;
                $scope.values = $scope.$eval($attributes.values);
                console.log($scope.date);
               
            }
        };
    });