Html - Second slide range not printing

Beep
June 12, 2024
139 views
0 votes
2 Answers

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>

Answers

As pointed out in the comments, your oninput and onchange event handlers are not properly set for the second slider.

<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 shadow">
        <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"
                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="myRange2"
                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>
        </div>
      </div>
    </div>
  </div>
</section>


function slider_value(value) {
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");

  output.innerHTML = slider.value;

  slider.oninput = function () {
    output.innerHTML = this.value;
  };
  
  value_name(value);
}

function slider_value2(value) {
  var slider2 = document.getElementById("myRange2");
  var output2 = document.getElementById("demo2");

  output2.innerHTML = slider2.value;

  slider2.oninput = function () {
    output2.innerHTML = this.value;
  };

  value_name(value);
}

// method used to change name according to slider value
function value_name(value) {
  if (parseInt(value) == 50000) {
    alert("I am 50,000");
  }
  else {
    // Handle other cases
  }
}

Make sure myRange2 is the correct ID for the second slider.
Ensure the value_name function is called within both slider_value and slider_value2.
I’m assuming you left out the closing </div>s accidentally.

This should work now.

There is actually quite a bit wrong with your Javascript and html. You really should do some formatting and just look through the code.

Some of the Javascript errors I found just by looking at the errors output to the browser console. You really need to watch the console when you have things that don’t work.

I’ll list a few of the major changes (fixes) I made, but you will need to look at the NOTE comments in the code snippet to see all the changes.

HTML is missing five closing div’s
You have two span elements with the same id ("demo")
slider_value() was resetting the .oninput which was making the value only show when you stopped moving the slider
slider_value2() was trying to get the id myRange2 which does not exist. It should be month_inv.

If you remove all my NOTEs and commented out code, each of the two slider_value() functions comes down to simple 4 lines of code.

Please run and read the code snippet here.

function slider_value(value) {
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  // NOTE You do not need slider2 values in this function
  //      And the id for second slider is called month_inv in the html, not myRange2
  // var slider2 = document.getElementById("myRange2");
  // var slider2 = document.getElementById("month_inv");
  // var output2 = document.getElementById("demo2");

  output.innerHTML = slider.value;

  // NOTE This was breaking your slider output, oninput was already set in the html
  //      and this line of code replaced it
  // slider.oninput = function () {
  //   output.innerHTML = value;
  // }

  // NOTE You don't need this, oninput was already set in the html
  //      Also, here you have oninput2 which wouldn't do anything anyway (it would need to be without the 2)
  // slider2.oninput2 = function () {
  //   output2.innerHTML = value;
  // }

  this.value_name(value);
}

function slider_value2(value) {
  // NOTE The id for second slider is called month_inv in the html
  //      Also, you call this variable slider, but try to use both slider and slider2 a few lines below
  // var slider = document.getElementById("myRange2");
  var slider2 = document.getElementById("month_inv");
  var output = document.getElementById("demo2");

  // NOTE slider or slider2 ???
  // output.innerHTML = slider.value;
  output.innerHTML = slider2.value;

  // NOTE You don't need this, oninput was already set in the html
  //      Also, here you have oninput2 which wouldn't do anything anyway (it would need to be without the 2)
  // slider2.oninput2 = function () {
  //   output.innerHTML = value;
  // }

  // NOTE value_name() tests for 50000 and slider2 only goes to 1000
  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 {

  }
}

<!-- NOTE I had to change this section for my envrionment, I presume you can put it back -->
<section id="theme_section_attr" class="theme_section_attr">
  <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">
            <!-- NOTE You have two span elements with the same id ("demo") -->
            <!-- <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>

<!-- NOTE Missing 5 closing </div> tags -->
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Second slide range not printing

Answers