JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script>
// third-party code - cannot be modified
angular.module('ui-rangeSlider', []).directive('rangeSlider', [function() {
return {
restrict: 'A',
replace: true,
template: '<div>base</div>'
};
}]);
// this is your extension
angular.module('ui-rangeSlider').config(['$provide', function($provide) {
$provide.decorator('rangeSliderDirective', function($delegate) {
var dir = $delegate[0];
dir.template = ['<div>', dir.template, '<div>extended</div></div>'].join('');
return $delegate;
})
}]);
// this is your app
angular.module('sample', ['ui-rangeSlider']);
</script>
<body ng-app="sample">
<div range-slider></div>
</body>