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

Totaling the values of multiple range sliders with jQuery

I have multiple range sliders in a Gravity Form. I want to calculate the totals of the user’s choices and display on screen. The jQuery works and does what it should.

However I need the initial values of each slider to be zero and then stop them going over a total of 100, but if I use jQuery to set the initial value of each slider to zero with $('.slider').val(0) as suggested elsewhere, the value of #total remains always zero. How can I set initial values to zero and still get #total to display the sum of all slider values?

$('.slider').on('change', function() {
  var sum = 0;
  $('.slider').each(function() {
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });
  $('#total').text(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="total"></p>
<input name="input_1" id="input_1_1" type="number" step="1" min="0" max="100" value="50" class="slider" />
<input name="input_2" id="input_1_2" type="number" step="1" min="0" max="100" value="50" class="slider" />
<input name="input_3" id="input_1_3" type="number" step="1" min="0" max="100" value="50" class="slider" />
Tags:

2

Answers


  1. 0

    You can set the initial value of the number field to 0 using the Default Value under the Advanced Tab of the field in Gravity Forms

      $('.slider').val(0);
  $('.slider').on('change', function() {
    var sum = 0;
    $('.slider').each(function() {
      sum += parseInt($(this).val());
    });
    if (sum > 100) {//this will prevent the total from exceeding 100
      $(this).val($(this).val() - (sum - 100));
      sum = 100;
    }
    $('#total').text(sum);
  });
    Login or Signup to reply.
  2. 0

    Not sure how the sliders are related, but

    • Use a type="range" if you need "sliders"
    • Cache your elements. It’s not performant to go query the DOM on every input change onr input event.
    • Use .reduce() to reduce a list (array or collection) to a different type (Number) in your case
    • Use Math.min() to cap your value to a max of 100
    const $slider = $(".slider");
const $total = $("#total");

$slider.on("input", () => {
  let sum = $slider.get().reduce((acc, el) => acc += parseInt(el.value ?? 0), 0);
  sum = Math.min(sum, 100);
  $total.text(sum);
});
    <input name="input_1" type="range" min="0" max="100" value="0" class="slider" />
<input name="input_2" type="range" min="0" max="100" value="0" class="slider" />
<input name="input_3" type="range" min="0" max="100" value="0" class="slider" />
<p id="total"></p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Even with this solution (since you did not explained what are you actually after) it’s a bad UX to let the user slide something uselessly – seeing a value result unchanged at 100. I’ll leave it up to you to figure out the actual UI requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search