I have two slider bars that should output a number each.
My first is outputting a number in `
however I cant get the second slider bar number to out put.
Can someone see why ?`
function slider_value(value) {
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
output.innerHTML = slider.value;
slider.oninput = function () {
output.innerHTML = value;
}
slider2.oninput2 = function () {
output2.innerHTML = value;
}
this.value_name(value);
}
function slider_value2(value) {
var slider = document.getElementById("myRange2");
var output = document.getElementById("demo2");
output.innerHTML = slider.value;
slider2.oninput2 = function () {
output.innerHTML = value;
}
this.value_name(value);
}
// method used to change name according to slider value
function value_name(value) {
var count = document.getElementById("myRange");
if (parseInt(value) == 50000) {
alert("I am 50,000");
}
else {
}
}
<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">
<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"
oninput="slider_value(this.value)"
onchange="slider_value(this.value)">
</div>
<p class="m-0 p-0">50 <span style="float: inline-end;">50,000</span></p>
</div>
<div>
<p class="m-0 p-0"><strong>Monthly Investigations <span id="demo2" style="float: inline-end;color: #00AFAB;"></span></strong></p>
<div class="slidecontainer">
<input
id="month_inv"
type="range"
min="10"
max="1000"
value="10"
class="slider"
oninput="slider_value2(this.value)"
onchange="slider_value2(this.value)">
</div>
<p class="m-0 p-0">10 <span style="float: inline-end;">1,000</span></p>
</div>
</section>