Programatically alter slider's value

http://stackoverflow.com/questions/27505558/how-to-make-effect-of-text-box-value-changes-to-a-jquery-functionality/

by akmiecik

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div id="select_timeframe">Slide to select Quarter:
<form id="myForm" action="https://theapp.asphaltunlimitedllc.com/reply-v7" autocomplete="off" name="myform">
<input id="region" name="region" type="hidden" value="" />
<input id="slider_pic" class="slider" max="6" min="1" name="months_out" type="range" value="3" />
</form>

CSS

/*
AUBURN ORANGE               AUBURN BLUE
HEX CODE: #E87722;          HEX COLOR: #0C2340;
RGB: (232, 119, 34)         RGB: (12, 35, 64)
*/

body,
html {
	overflow-x: hidden;
	overflow-y:scroll;
}
    .entry-content,
	body {
		background: transparent !important;
	}
    #content {
        background: linear-gradient(180deg, rgba(3,36,77,1) 0%, rgba(3,36,77,.8) 30%, rgba(3,36,77,.2) 100%), url(https://theapp.asphaltunlimitedllc.com/wp-content/uploads/2021/09/asphalt.jpg);
        background-repeat: no-repeat;
        background-size: 149% 100%;
        
    }
    .page-content,
	.entry-content {
		background-color: transparent !important;
		overflow: hidden;
	}
	.swpm-login-form-inner {
		position: relative;
		left: 16vw;
	}
	#rmp-container-1787 {
		padding-top: 12vh;
		background-color: unset;
		background-image: url('https://theapp.asphaltunlimitedllc.com/wp-content/themes/asphalt/asphalt mobile 5 css.svg');
		background-position: 3.5vw 35vh;
	}
	#rmp-menu-wrap-1787 .rmp-menu-item-link {
		height: 8vh;
		font-size: 7vw;
	}
	main {
		height: 98vh;
	}
	body,
	html {
		overflow-y: hidden;
		background-color: #03244d;
	}
	.ast-header-break-point .main-header-bar {
		min-height: unset !important;
		max-height: 80px;
	}
	#logo_box {
        position: fixed !important;
        top: 0vh !important;
        left: unset !important;
        right: 0vw !important;
        z-index: 9999;
        height: 12vh;
        box-shadow: 0px 2px 4px #000000;
        border-bottom: 2px ridge #ffffff;
        width: 100vw;
        background-color: #03244d;
    }
	#the_logo img {
		max-width: 40vw;
		position: fixed;
		top: .5vh;
		left: 29vw;
	}
	#rmp-menu-wrap-1787 .rmp-menu-current-item .rmp-menu-item-link {
		color: #fff;
		border-color: #1d4354;
		background-color: #dd550c;
	}
	#secondary {
		display: none;
	}
	#brian_name {
		display: none;
	}
	#loader {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100vw;
	min-height: 100vh;
 /*   background-image:...

JavaScript

jQuery(function($) {

window.onload = function() {

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

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


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

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