In this article, we are going to make a custom date slider using rzsldier in angular js and also implement 3 types of date sliders such as Yearly, Quarterly, and Monthly basis in one slider.
A breif introduction about the project
Please check out the video to get a knowledge of what we are trying to achieve here:
There are 3 types of sliders, we want to implement.
- Year slider: here every point in the slider represent a year.
In case of the starting slider is on any point, the date value will be 1st date of that year to last date of last month of the year for example, if we select 2011 to 2015, then the date range should be 1st January 2011 to 31st December of 2015. - Quarter Slider: here the range is divided quarterly. And the selected dates will be like, if we select 2nd quarter of 2010 to 3rd quarter of 2014, then the date range will be 1st Apr 2010 to 30th september 2014.
- Month Slider: In this case the step difference will be monthly. For example: , if we select December 2010 to March 2012, then the date range will be 1st December 2010 to 31st March 2014.
You can see we also did logging to see the output date range in our code and the output can be shown in the video above.
Required technologies
- Angular JS
- rzSlider plugin
- ng sanitize
All the links will be provided below.
Let’s start with basic slider
Let’s make a simple slider that will contain a minimum value of 0 and a maximum value of 100.
Create index.html and dateslider.js
Import rzslider from https://github.com/angular-slider/angularjs-slider/blob/master/src/rzslider.js.
Paste this code inside index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="rzslider.css" />
<title>Date Slider</title>
</head>
<body>
<h1>Date Slider</h1>
<div ng-app="myApp">
<div
style="width: 50%"
ng-controller="DateSliderController"
>
<rzslider
rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"
></rzslider>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-sanitize.js"></script>
<script src="rzslider.js"></script>
<script src="dateSlider.js"></script>
</body>
</html>
Now let’s create a new script file naming “dateSlider.js” and paste the following code:
var app = angular.module("myApp", ["ngSanitize", "rzSlider"]);
app.controller("DateSliderController", function ($scope) {
$scope.slider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
});The output will show like this:
Notice the options object under slider value, there are 3 fields: floor, ceil, step.
As the name suggests, floor is the starting value and ceil is the ending value. step is the number increase one by one creating mid points.
minvalue & maxvalue are nothing but initial values of slider end points.
We can also make our own array and provide it inside options which will not be dependent of steps. The best use cases for it are if we want some custom values to date slider like letters or even date.
Add array to slider
To add an array, in the js file, make following changes:
$scope.slider = {
minValue: 'E',
maxValue: 'T',
options: {
stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
}
};And the output will be shown like this:
Showing custom display function
Next, we are going to learn custom display function, it’s being used to store one value in slider but showing different display values for better UI experience,
For example, we are making the below changes in the js file to display the price range :
$scope.slider = {
minValue: 100,
maxValue: 300,
options: {
floor: 0,
ceil: 500,
step: 100,
showTicksValues: true,
translate: function (value) {
return 'Price: $' + value;
}
}
};
Output:
Create custom dates array depending upon types
Now, that we have learned the rzSlider, lets go ahead and create the date slider as we desire.
Follow these code provided below:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="rzslider.css" />
<title>Date Slider</title>
</head>
<body>
<h1>Date Slider</h1>
<div ng-app="myApp">
<div ng-controller="DateSliderController" ng-init='dateType="year"'>
<div>
<select ng-model="dateType" ng-change="getRanges(dateType)">
<option ng-repeat="option in dateTypes" value="{{option}}">
{{option}}
</option>
</select>
{{dateType}}
</div>
<rzslider
rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"
></rzslider>
<br />
Start Date- {{arr[slider.minValue].startDate.toLocaleString()}} ,End
Date- {{arr[slider.maxValue].endDate.toLocaleString()}}
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-sanitize.js"></script>
<script src="rzslider.js"></script>
<script src="dateSlider.js"></script>
</body>
</html>Inside the dateSlider.js:
var app = angular.module("myApp", ["ngSanitize", "rzSlider"]);
app.controller("DateSliderController", function ($scope) {
$scope.dateTypes = ["year", "quarter", "month"];
$scope.getSlider = function () {
$scope.slider = {
minValue: 0,
maxValue: $scope.arr.length - 1,
options: {
floor: 0,
ceil: $scope.arr.length - 1,
draggableRange: true,
showTicks: true,
translate: function (value, sliderId, label) {
return `<b>${$scope.arr[value].displayStr}</b>`;
},
},
};
};
$scope.getRanges = function (type) {
var minYear = 2010;
var maxYear = 2015;
$scope.arr = [];
if (type == "year") {
for (let i = minYear; i <= maxYear; i++) {
var dateVal = {
startDate: new Date(i, 00, 01),
endDate: new Date(i, 11, 31),
displayStr: `${i}`,
};
$scope.arr.push(dateVal);
}
} else if (type == "month") {
for (let i = minYear; i <= maxYear; i++) {
for (let j = 0; j < 12; j++) {
var currDate = new Date(i, j);
var monthStr = `${currDate.toLocaleString("en-US", { month: "long" })} ${currDate.getFullYear()}`;
var dateVal = {
startDate: new Date(i, j, 01),
endDate: new Date(i, j + 1, 0),
displayStr: `${monthStr}`,
};
$scope.arr.push(dateVal);
}
}
} else {
for (let i = minYear; i <= maxYear; i++) {
for (let j = 0; j < 12; j += 3) {
var dateVal = {
startDate: new Date(i, j, 01),
endDate: new Date(i, j + 3, 0),
displayStr: `Q${(j / 3) + 1}- ${i}`,
};
$scope.arr.push(dateVal);
}
}
}
console.log($scope.arr);
$scope.getSlider();
};
$scope.arr = [];
$scope.getRanges("year");
$scope.$watch("slider.minValue", function () {
console.log(`Min Value changed to ${$scope.arr[$scope.slider.minValue].startDate.toLocaleString()}`);
});
$scope.$watch("slider.maxValue", function () {
console.log(`Max Value changed to ${$scope.arr[$scope.slider.maxValue].endDate.toLocaleString()}`);
});
});See the code with output live here:
Reference
- Rz Slider :https://github.com/angular-slider/angularjs-slider
- Demo page for rz slider: http://angular-slider.github.io/angularjs-slider/index.html
