Передать переменную из 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
}
});