jQuery UI Slider объединяет разные значения - PullRequest
Новая
       37

jQuery UI Slider объединяет разные значения

0 голосов
/ 29 октября 2018

Мне нужно создать несколько слайдеров jQuery UI, в то время как каждый из них имеет свое значение. Все значения ползунка суммируются и не могут превышать максимум 11.000.

Вот моя скрипка

Моя проблема: есть ошибка, когда ползунок (например, первый) добавляет к результату меньше его собственного значения (100). Это не должно быть возможно.

Чтобы воспроизвести это, пожалуйста, установите следующие значения:

Слайдер 1: 58 (5,800 долларов США) и Слайдер 2: 74 (5,180 долларов США)

Общая сумма составляет $ 10,980, что вполне нормально. Если вы теперь перетащите ползунок 1 чуть правее, будет добавлено 20 вместо 100. Поскольку максимальное значение равно 11k, ползунок теперь должен возвращать значение false и не быть перетаскиваемым вправо. 

function number_format(number, decimals, decPoint, thousandsSep) {
  decimals = decimals || 0;
  number = parseFloat(number);

  if (!decPoint || !thousandsSep) {
    decPoint = '.';
    thousandsSep = ',';
  }

  var roundedNumber = Math.round(Math.abs(number) * ('1e' + decimals)) + '';
  var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber;
  var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : '';
  var formattedNumber = '';

  while (numbersString.length > 3) {
    formattedNumber += thousandsSep + numbersString.slice(-3)
    numbersString = numbersString.slice(0,-3);
  }

  return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
}

// /3230895/jquery-slider-kombinirovannye-znacheniya-trudnosti-s-nebolshimi-prirascheniyami

jQuery(function() {
  var maxValueSlider = 200,
      maxValueTotal = 11000,
      $sliders = jQuery(".prebate-calc .slider"),
      valueSliders = [],
      $displaySpentTotal = jQuery('.prebate-calc-result');

  function arraySum(arr) {
    var sum = 0, i;
    for (i in arr) sum += arr[i];
    return sum;
  }

  $sliders.each(function(i, slider) {
    var $slider = jQuery(slider);

    valueSliders[i] = 0;

    $slider.slider({
      range: 'min',
      value: 0,
      min: 0,
      max: maxValueSlider,
      step: 1,
      animate: true,
      slide: function(event, ui) {
        var priceElement = jQuery(this).parent().next();
        var getBasePrice = priceElement.data('each');

        var sumRemainder = arraySum(valueSliders) - valueSliders[i],
            adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);

        calculatedValue = Math.min(maxValueTotal - sumRemainder, ui.value*getBasePrice);

        valueSliders[i] = calculatedValue;

        priceElement.removeClass('prebate-calc-price-inactive');
        priceElement.attr('data-price', calculatedValue);
        priceElement.html('$ ' + number_format(calculatedValue, 0, ',', '.'));

        // display the current total
        $displaySpentTotal.html('Total prebate: $ ' + number_format(sumRemainder + calculatedValue, 0, ',', '.'));

        // display the current value in tooltip
        var slidertip = '<div class="slidertip-inner">' + Math.ceil(calculatedValue/getBasePrice) + '</div>';
        jQuery('.ui-slider-handle', this).html(slidertip);

        // console.log(sumRemainder + calculatedValue);

        // stop sliding (return false) if value is equal to max
        return (sumRemainder + calculatedValue) != maxValueTotal;

        // set slider to adjusted value
        $slider.slider('value', adjustedValue);
      }
    });
  });
});

Спасибо

...