angularjs-slider | Slider directive for AngularJS | Animation library

I'm using angularJS with rzSlider to allow a user to manually enter a number value or use the slider which will then populate the input. The problem is when they drag the slider and then delete the entire input from the input field the rzslider floor goes to undefined or NaN. I'm using a directive to draw out the HTML.

HTML:

I have run through the tour of heroes angular tutorial. Now I am striking out on my own. But have stumbled at the first hurdle!

How do I add a third party UI component?

I simply want to add a slider (https://github.com/angular-slider/angularjs-slider) to a page. I have searched high and low but cannot find an example of how I do this in a typescript/angular-cli world?

I have added the the package npm i angularjs-slider --save

How do I add it to an angular typescript component file and html?

Its been a day since i have stuck in this problem. I have install ui-select through bower and its installed successfully. The css file is loading correctly but the javascript file is not loading in the network call, but I can clearly see the file in view page source.

Thats why i get this error.

I'm trying to set the initial start/end date positions for an angularjs date slider. Here's where I'm at. As you'll see the end position initialises as 2018-11-01 (see vm.slider.max) when I want it to be 2018-11-30. Any suggestions appreciated.

https://jsfiddle.net/geotheory/uxxsq80k/

I'm using this AngularJS Slider, the horizontal one. I took the example that has the points divided by a different distance. That example, started from a wide distance, to end with a small distance:

What I wanted to do, is to invert the scale keeping the numbering. This is my code: JSFIDDLE

As you can see, I changed the function customValueToPosition:

I am using RZslider for the date and picker. But I am facing some problem again and agin. And also new in Rzlider and angularJs. So Slider containing 8hrs of current time +4hrs and -4hrs. If I am run the slider then it containing current time and -4, +4, Example If current time is 10:00 then slider filles 06:00 to 14:00.

Screen Shot:

Then If I change the slider Like drag and after select the date then slider again comes default current value. But I don't want to change slider position after select the date. Because if I change the slider and select the date then I will click one apply button then I will get start date, time and end date, time.

I am implementing timepicker based on the date and after that select the time. Right now slider draw the perfectly for the static time.
See the example:

I am implementing date and time picker with RZslider. I build RZslider as a time picker. So right now Rzslider taking current date. But I want to change date choose by user. I am sharing my demo example:

I have to implement one RZSlider with 10 minutes interval with 32Hrs. I am using date picker also. So I set this date picker and time slider into one html page. If when I land on this page then It should be select by default today date with 8 Hrs window, Mean -4Hrs and +4Hrs with current date. For Example: If I land on this page 23 july at 23:00, Then range should be 19:00 to 3:00. But In this case 3:00 comes into 24 July. I want to make this slider like date picker with time.

starting from 8:10,8:20,8:30,8:40,8:50,9:10.....12:10,12:20.......23:10,23:20,23:30,23:40,23:50,00:00,00.10,00:20,00:30,00:40,00:50,1:00.......4:00 End To.

I already implement some logic for 32Hrs range but this is failing in some cases then slider will break and compatible issue will comes. I am not able show my code because code is dependent on other code.