I am encountering an issue with implementing a JQuery slider in my application. When I use it solely with JQuery, it functions properly. However, when I incorporate it into an angular directive built with typescript, the display is not as expected.
https://i.sstatic.net/BW0XH.png
Below is the code for the directive:
SliderDirective.$inject = ["$window"];
function SliderDirective($window: ng.IWindowService): IMediaDirective {
return {
restrict: "EA",
link: link
}
function link(scope: IMediaDirectiveScope, element: ng.IAugmentedJQuery, attrs: IMediaDirectiveAttributes) {
element.slider({
range: true,
min: 10,
max: 100,
value: 50,
slide: (event: Event, ui: JQueryUI.SliderUIParams) => {
scope.$apply(function () {
scope[attrs.ngModel] = ui.value;
});
}
})
}
}
angular.module("mediaApp").directive("slider", SliderDirective);
HTML template:
<input ng-model="slider" type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<slider ng-model="slider"></slider>
While other directives function as expected, the JQuery slider directive within Angular is causing issues. I am utilizing VS 2015, jqueryui.d.ts, and angular.d.ts from DefinitelyTyped.
Thank you for any assistance provided!