is based on Ion.rangeSlider.js, the main code is as follows:
<link rel= "stylesheet" type= "Text/css" href= "/css/slider/normalize.css"/>
<link rel= "stylesheet" type= "Text/css" href= "/css/slider/ion.rangeslider.css"/>
<link rel= "stylesheet" type= "Text/css" href= "/css/slider/ion.rangeslider.skinmodern.css"/>
<script type= "Text/javascript" src= "/lib/angular.js" ></script>
<script type= "Text/javascript" src= "/lib/jquery-2.1.3.min.js" ></script>
<script type= "Text/javascript" src= "/lib/ion.rangeslider.js" ></script>
<script type= "Text/javascript" src= "/lib/ng-underscore.js" ></script>
<script>
var Rangesliderapp = angular.module (' Rangesliderapp ', ["Ngunderscore"]);
Rangesliderapp.directive (' Yearshaft ', ["underscore", function (underscore) {
return{
Restrict: "A",
Scope: {
Years: "=",
Selectedyear: "="
},
Link:function (scope,element) {
var years = Underscore.sortby (Scope.years);
var length = Years.length;
var max = years[length-1];
var min = years[0];
var inityears = function (years) {
if (years.length==1) {
var year = new Date (). getFullYear ();
if (years[0] = = year) {
max = Years[0];
min = years[0]-1;
length = 2;
}else if (Years[0] < year) {
max = year;
min = years[0];
length = Max-min +1;
}
}
return years;
};
Inityears (Scope.years);
$ (Element). Ionrangeslider ({
Hide_min_max:true,
Prettify_enabled:false,
Keyboard:true,
Type: "single",
Grid:true,
Step:1,
Grid_num:length-1,
Max:max,
Min:min,
From_fixed:true,
From:scope.selectedyear
});
}
}
}]);
</script>
Angularjs Time Axis directives