Get quarters

by akmiecik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>
<div id="select_timeframe">Slide to select timeframe:
<span id="demo"></span>
<span id="demo1" style="display: none;"></span></div>

<form id="myForm" action="foo" autocomplete="off" name="myform">
<input id="region" name="region" type="hidden" value="" />
<input id="months_out" class="slider" max="18" min="0" name="months_out" step="3" type="range" value="-1" />
</form>

CSS

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: orange;
  outline: none;
  opacity: 0.7;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 56px;
  border: 0;
  margin-top: 54px;
 background: url("https://asphaltunlimitedllc.com/slider.svg");
  cursor: pointer;
  background-repeat: no-repeat;
}
.slider:hover {
  opacity: 1;
}

JavaScript

window.onload = function() {

const options = { month: 'long', year: 'numeric'};
const today = new Date();
var startMonth = (today.getDate() >= 2) ? dateFns.addMonths(today, 2).toLocaleDateString("en-US", options):dateFns.addMonths(today, 1).toLocaleDateString("en-US", options);

var slider = document.getElementById("months_out");

var output = document.getElementById("demo1");
output.innerHTML = slider.value; 

slider.oninput = function(e) {
var months_out = output.innerHTML = this.value;
var months_out = this.value;	
if (this.value == 3) {
        document.getElementById('demo').innerHTML = dateFns.startOfQuarter(startMonth).toLocaleDateString("en-US", options) + " - " + dateFns.endOfQuarter(startMonth).toLocaleDateString("en-US", options);} 
if (this.value == 6)  {
        document.getElementById('demo').innerHTML = dateFns.startOfQuarter(dateFns.subQuarters(startMonth,-1)).toLocaleDateString("en-US", options) + " - " + dateFns.endOfQuarter(dateFns.subQuarters(startMonth,-1)).toLocaleDateString("en-US", options);}
if (this.value == 9)  {
        document.getElementById('demo').innerHTML = dateFns.startOfQuarter(dateFns.subQuarters(startMonth,-2)).toLocaleDateString("en-US", options) + " - " + dateFns.endOfQuarter(dateFns.subQuarters(startMonth,-2)).toLocaleDateString("en-US", options);}
if (this.value == 12)  {
        document.getElementById('demo').innerHTML = dateFns.startOfQuarter(dateFns.subQuarters(startMonth,-3)).toLocaleDateString("en-US", options) + " - " + dateFns.endOfQuarter(dateFns.subQuarters(startMonth,-3)).toLocaleDateString("en-US", options);}
if (this.value == 15)  {
        document.getElementById('demo').innerHTML = dateFns.startOfQuarter(dateFns.subQuarters(startMonth,-4)).toLocaleDateString("en-US", options) + " - " + dateFns.endOfQuarter(dateFns.subQuarters(startMonth,-4)).toLocaleDateString("en-US", options);}
if (this.value == 18)  {    
			document.getElementById('demo').innerHTML =...