Sliders with AngularJS/Ionic

angular has growing no.of plugins. it has good  plugin called rzslider. to work with sliders
here is the link to it: https://github.com/angular-slider/angularjs-slider

lets see how to use it:
i want a slider to select a time range of start time to end time, so my slide will look like this:

here is the html:

1. download the package from above link or you can use npm to install to your project folder

2. add the css and js files in header

         <link href="css/rzslider.css" rel="stylesheet">

        <script src="js/rzslider.js"></script>

3. include slide tag in your page

        <rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-                       high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>

mignRangeSlider is initialized in angular code behind.

code:

$scope.minRangeSlider = {

        minValue: 8,

        maxValue: 18,

        options: {

            floor: 0,

            ceil: 24,

            step: 1

        }

    };

thats it. it has several sliders, using the same steps you can use them.