Question 237268 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Extract value from jQuery Slider/Input to use globally without relying on console logging

I want to be able to use the values that I get from my sliders here in more than just one action for some later calculation. In addition to the solution below, I tried declaring space as a variable before I excecute the jQuery function, but that didn’t work either. I have the following code:

$("#spaceRange").on("input", function () {
        space = Number($(this).val());
        leftEar.x(space * scale + faceDist);
        rightEar.x(-(space * scale + faceDist));
        updateObjects();
        return space;
    });

var num = $("#spaceInput").val();
    console.log(num);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
    <label for="rightLeftSlider" class="form-label">R/L Space - Inches</label>
    <form>
        <input type="range" class="form-range w-75" id="spaceRange" min="0" max="20" value="0"
            oninput="this.form.spaceInput.value=this.value" />
        <input type="number" id="spaceInput" min="0" max="20" value="0"
            oninput="this.form.spaceRange.value=this.value" />
    </form>
</div>
Tags:

2

Answers


  1. 0

    You are going to need to put references to them in some sort of function that is triggered and called after they have been changed.

    Having variables just floating in your code that load when the page loads isn’t storing the values of the fields after they have been changed. It’s storing the values at that point in time.

    Here is an example that shows the values inside of a function, in this case just a click handler on a random button. Also I have a reference just floating outside that loads when the page loads.

    $(".btn").on("click", function() {
  console.log("I loaded after clicking the button so I got the current value  " + $("#spaceRange").val())
});

console.log("i Loaded with the page " + $("#spaceRange").val())
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <label for="rightLeftSlider" class="form-label">R/L Space - Inches</label>
  <form>
    <input type="range" class="form-range w-75" id="spaceRange" min="0" max="20" value="0" oninput="this.form.spaceInput.value=this.value" />
    <input type="number" id="spaceInput" min="0" max="20" value="0" oninput="this.form.spaceRange.value=this.value" />
  </form>
</div>


<button class="btn">Get Values</button>
    Login or Signup to reply.
  2. 0

    Not 100% sure on your direction here but this might get you started on how to pass variables around.

    // faked these since they were undefined
var leftEar = {
  x: function(v) {
    console.clear();
    console.log(v);
  }
};
var rightEar = {
  x: function(v) {
    console.log(v);
  }
};

function updateObjects(val) {
  // more fake of undefined stuff
  let scale = 1;
  let faceDist = 1;
  let space = val;
  leftEar.x(space * scale + faceDist);
  rightEar.x(-(space * scale + faceDist));
}

$("#spaceRange").on("input", function() {
  let v = $(this).val() * 1; //simpler than Number()
  $("#spaceInput").val(v);
  updateObjects(v);
});
$("#spaceInput").on("input", function() {
  let v = $(this).val() * 1; //simpler than Number();
  $("#spaceRange").val(v);
  updateObjects(v);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <label for="rightLeftSlider" class="form-label">R/L Space - Inches</label>
  <form>
    <input type="range" class="form-range w-75" id="spaceRange" min="0" max="20" value="0" />
    <input type="number" id="spaceInput" min="0" max="20" value="0" o/>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search