Передать переменную из html в js

Есть html код под слайдер выбора цены и js для него:

<div class="aside">
                <h3 class="aside-title">Цена</h3>
                <div class="price-filter">
                    <div id="price-slider" min="0" ></div>
                    <div class="input-number price-min">
                        <input id="price-min"  type="number">
                        <span class="qty-up">+</span>
                        <span class="qty-down">-</span>
                    </div>
                    <span>-</span>
                    <div class="input-number price-max">
                        <input id="price-max" type="number">
                        <span class="qty-up">+</span>
                        <span class="qty-down">-</span>
                    </div>
                </div>
            </div>

var priceInputMax = document.getElementById('price-max'),
        priceInputMin = document.getElementById('price-min');

priceInputMax.addEventListener('change', function(){
    updatePriceSlider($(this).parent() , this.value)
});

priceInputMin.addEventListener('change', function(){
    updatePriceSlider($(this).parent() , this.value)
});

function updatePriceSlider(elem , value) {
    if ( elem.hasClass('price-min') ) {
        console.log('min')
        priceSlider.noUiSlider.set([value, null]);
    } else if ( elem.hasClass('price-max')) {
        console.log('max')
        priceSlider.noUiSlider.set([null, value]);
    }
}

// Price Slider
var priceSlider = document.getElementById('price-slider')
if (priceSlider) {
    noUiSlider.create(priceSlider, {
        start: [0, 999],
        connect: true,
        step: 1,
        range: {
            'min': 0,
            'max': 999
        }
    });

    priceSlider.noUiSlider.on('update', function( values, handle ) {
        var value = values[handle];
        handle ? priceInputMax.value = value : priceInputMin.value = value
    });

Не могу понять как в js мне заменить 'min': 0,'max': 999 на значения которые я передам в html


Ответы (2 шт):

Автор решения: BlackStar1991

Как-то так.

var priceInputMax = document.getElementById('price-max'),
  priceInputMin = document.getElementById('price-min');

priceInputMax.addEventListener('change', function() {
  updatePriceSlider($(this).parent(), this.value)
});

priceInputMin.addEventListener('change', function() {
  updatePriceSlider($(this).parent(), this.value)
});

function updatePriceSlider(elem, value) {
  if (elem.hasClass('price-min')) {
    console.log('min')
    priceSlider.noUiSlider.set([value, null]);
  } else if (elem.hasClass('price-max')) {
    console.log('max')
    priceSlider.noUiSlider.set([null, value]);
  }
}

// Price Slider
var priceSlider = document.getElementById('price-slider')
if (priceSlider.length !== 0) {

  valMin = +priceInputMin.getAttribute('min');
  valMax = +priceInputMax.getAttribute('max');

  function createSlider() {
    noUiSlider.create(priceSlider, {
      start: [0, 999],
      connect: true,
      step: 1,
      range: {
        'min': valMin,
        'max': valMax
      }
    });

    priceSlider.noUiSlider.on('update', function(values, handle) {
      var val = values[handle];
      handle ? priceInputMax.value = value : priceInputMin.value = val;
    });

  }


}
<div class="aside">
  <h3 class="aside-title">Цена</h3>
  <div class="price-filter">
    <div id="price-slider" min="0"></div>
    <div class="input-number price-min">
      <input id="price-min" type="number" min="10">
      <span class="qty-up">+</span>
      <span class="qty-down">-</span>
    </div>
    <span>-</span>
    <div class="input-number price-max" max="100">
      <input id="price-max" type="number">
      <span class="qty-up">+</span>
      <span class="qty-down">-</span>
    </div>
  </div>
</div>

→ Ссылка
Автор решения: Faraday
let priceSlider = document.getElementById('price-slider');
let minValue = Number(document.getElementById('min-item-id').innerHTML);
let maxValue = Number(document.getElementById('max-item-id').innerHTML);

if (priceSlider) {
    noUiSlider.create(priceSlider, {
        start: [0, 999],
        connect: true,
        step: 1,
        range: {
            'min': minValue,
            'max': maxValue
        }
    });
→ Ссылка