I have a slider that has a number of employees
<input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp" >
I store the range selected in id demo
<span id="demo" style="float: inline-end;color: #00AFAB;">
Depending on the number of employees held in demo I want to change cost_by_employee_count
for example if demo between 500 to 1000 employees then cost_by_employee_count
is set to **3290000 **
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
<section <?php theme_section_attr_id() ?>
<?php theme_section_attr_class( 'pb-5' ) ?>>
<div class="container">
<div class="row pt-5">
<div class="col-md-8 showdow">
<div class="row p-5 pb-0">
<div class="pb-5">
<p class="m-0 p-0"><strong>Number of Employees <span id="demo" style="float: inline-end;color: #00AFAB;"></span></strong></p>
<div class="slidecontainer">
<input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp">
</div>
<p class="m-0 p-0">50 <span style="float: inline-end;">50,000</span></p>
</div>
</section>
Ideally I would like a Array where if the employee count falls in between a range of numbers then set cost_by_employee_count
to the value depending on the range.
the array would be like:
<option value="3310000">0 - 499</option>
<option value="3290000">500 - 1000-</option>
<option value="4870000">1001 - 5000</option>
<option value="4330000">5001 - 10000</option>
<option value="5460000">10001 - 25000</option>
<option value="5420000">25001 - 100000</option>
Can someone point me in the right direction or give me a working example please.
Create an option array ranges
, call the function updateCostByEmployeeCount
whenever the user changes the value of the slider, and inside the the function updateCostByEmployeeCount
check for the condition value >= ranges[i].min && value <= ranges[i].max
and if it matches assign the respective cost to variable cost_by_employee_count
via cost_by_employee_count = ranges[i].cost
Refer the below code:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
var cost_by_employee_count = 0;
var ranges = [
{min: 50, max: 499, cost: 1000000},
{min: 500, max: 1000, cost: 3290000},
{min: 1001, max: 5000, cost: 7000000},
{min: 5001, max: 10000, cost: 15000000},
{min: 10001, max: 50000, cost: 30000000}
];
function updateCostByEmployeeCount(value) {
for (var i = 0; i < ranges.length; i++) {
if (value >= ranges[i].min && value <= ranges[i].max) {
cost_by_employee_count = ranges[i].cost;
break;
}
}
console.log('Cost of the employee count:' +cost_by_employee_count);
}
slider.oninput = function() {
output.innerHTML = this.value;
updateCostByEmployeeCount(this.value);
}
.slider {
width: 100%;
}
.console-log {
width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
margin-top: 10px;
font-family: monospace;
}
<html>
<head>
</head>
<body>
<section>
<div class="container">
<div class="row pt-5">
<div class="col-md-8 showdow">
<div class="row p-5 pb-0">
<div class="pb-5">
<p class="m-0 p-0">
<strong>Number of Employees <span id="demo" style="float: inline-end;color: #00AFAB;"></span></strong>
</p>
<div class="slidecontainer">
<input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp">
</div>
<p class="m-0 p-0">50 <span style="float: inline-end;">50,000</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>