Customize the slider step to point the 1st of every month

Description

This article explains how to customize the slider step to point to the 1st day of every month.

Step 1

Customize the ticks using the renderedTicks method.

renderedTicks: (args: SliderTickRenderedEventArgs) => {
            let li: any = args.tickElements;
            for (let i: number = 0; i < li.length; ++i) {
                (li[i].querySelectorAll('.e-tick-value')[0] as HTMLElement).innerText = getValue(i);
            }
}

Step 2

Initiate the ticks to display month/year format.

function getValue(i:number=0) {
          let mindate:Date=new Date("1/1/2020");
          let todayTime:Date = new Date(mindate.setMonth(mindate.getMonth()+i));
          let month = todayTime.getMonth();
          let months:string[] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
          let year:number = todayTime.getFullYear();
          return months[month] +  "/" + year;
}

Step 3

Display the whole date in the change event of the Slider.

change: (args: SliderChangeEventArgs) => {
                  console.log(args.value);
                  let mindate:Date=new Date("1/1/2020");
                  let value:Date = new Date(mindate.setMonth(mindate.getMonth()+(args.value as number)));
                  document.getElementById("val").innerText=value.toDateString();
}

Output

preview