Custom date slider in Angular JS

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.

  1. 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.
  2. 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.
  3. 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

  1. Angular JS
  2. rzSlider plugin
  3. 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

A result-oriented professional for overall 6+ years of rich experience in both backend and frontend code development and enhancement. Well-versed in skills like Asp .Net Core, MS SQL, Javascript, Html, REST API etc. An admirable team player having good communication skills and interpersonal skills with possess virtuosity resolving issue.

Leave a Reply

Your email address will not be published.

Back To Top