Html Question posted in
Some basic documentation can be found here.

Html – Second slide range not printing

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    1. HTML is missing five closing div’s
    2. You have two span elements with the same id ("demo")
    3. slider_value() was resetting the .oninput which was making the value only show when you stopped moving the slider
    4. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search