У меня есть ползунок цен, когда я обращался к исходным кодам, было максимум 5 продуктов, но я расставил их так, чтобы всего было 10. Теперь, когда я прокручиваю, он показывает определенное количество бессмысленных значений, и содержимое не меняется.
Шаг 1: https://prnt.sc/qO-teP8WUPDW (нет проблем) ... Шаг 4: https://prnt.sc/QeP2dCz8pXCK (проблема) ... Шаг 7: https://prnt.sc/lrK7-cByx0h7 (проблема)
Только на шаге 4 и 7 содержимое не меняется и имя пакета меняется бессмысленно. Ниже приведены коды, которые я использовал
function initSliderUI() {
var initIterator = 0;
if ($(".slider-ui")
.length) {
$(".slider-ui")
.each(function() {
var self = $(this),
sliderUI = self.find('.slider-line'),
sliderInp = self.find('.slider-inp'),
sliderUniqueId = 'sliderUI' + initIterator,
inputUniqueId = 'inputUI' + initIterator,
start = parseInt(sliderInp.attr('data-start')),
count_step = parseInt(sliderInp.attr('data-count-step'));
sliderUI.attr('id', sliderUniqueId);
sliderInp.attr('id', inputUniqueId);
initIterator++;
count_step = count_step ? count_step : 300;
var keypressSlider = document.getElementById(sliderUniqueId),
input = document.getElementById(inputUniqueId);
noUiSlider.create(keypressSlider, {
start: start ? start : 1,
step: 1,
connect: "lower",
tooltips: true,
format: {
to: function(value) {
return "VPS" + value;
//return parseInt(value);
},
from: function(value) {
return value;
}
},
range: {
'min': 1,
'max': count_step
},
pips: {
mode: 'values',
values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
density: 10,
stepped: true
}
});
// Calculate Docker Product second and third diagram
function getValue2(values, handle, unencoded, tap) {
var circle = $(this.target)
.closest('.sidebar')
.find('.circle');
circle.attr('data-percent', parseInt(unencoded) / count_step * 100);
}
keypressSlider.noUiSlider.on('change', getValue2);
keypressSlider.noUiSlider.on('update', function(values, handle) {
refreshInfo(values[handle]);
input.value = values[handle];
change_global_cloud_pkgs_href(values[handle]);
});
input.addEventListener('change', function() {
keypressSlider.noUiSlider.set([null, this.value]);
});
// Listen to keydown events on the input field.
input.addEventListener('keydown', function(e) {
// Convert the string to a number.
var value = Number(keypressSlider.noUiSlider.get()),
sliderStep = keypressSlider.noUiSlider.steps()
// Select the stepping for the first handle.
sliderStep = sliderStep[0];
// 13 is enter,
// 38 is key up,
// 40 is key down.
switch (e.which) {
case 13:
keypressSlider.noUiSlider.set(this.value);
break;
case 38:
keypressSlider.noUiSlider.set(value + sliderStep[1]);
break;
case 40:
keypressSlider.noUiSlider.set(value - sliderStep[0]);
break;
}
});
function getServicesInfo() {
var info = {
VPS1: {
name: "Name 1",
disk: "100GB",
ram: "1GB",
cpu: "1 Core",
bandwith: "100GB",
setup: "8€",
ip: "2 IPs",
price: "99.09",
priceon: "8.27",
orderlink: "URL"
},
VPS2: {
name: "Service B",
disk: "200GB",
ram: "4GB",
cpu: "2 Core",
setup: "15€",
ip: "4 IPs",
bandwith: "500GB",
price: "155.00",
priceon: "12.92",
orderlink: "URL"
},
VPS3: {
name: "Service C",
disk: "300GB",
ram: "8GB",
cpu: "4 Core",
setup: "Free",
ip: "8 IPs",
bandwith: "2TB",
price: "299.99",
priceon: "25.00",
orderlink: "URL"
},
VPS4: {
name: "Service D",
disk: "400GB",
ram: "12GB",
cpu: "4 Core",
setup: "Free",
ip: "8 IPs",
bandwith: "Unlimited",
price: "395.22",
priceon: "32.94",
orderlink: "URL"
},
VPS5: {
name: "Service E",
disk: "500GB",
ram: "16GB",
cpu: "8 Core",
setup: "Free",
ip: "12 IPs",
bandwith: "Unlimited",
price: "545.00",
priceon: "45.42",
orderlink: "URL"
},
VPS6: {
name: "Service E",
disk: "500GB",
ram: "16GB",
cpu: "8 Core",
setup: "Free",
ip: "12 IPs",
bandwith: "Unlimited",
price: "545.00",
priceon: "45.42",
orderlink: "URL"
},
VPS7: {
name: "Service E",
disk: "50GB",
ram: "16GB",
cpu: "8 Core",
setup: "Free",
ip: "12 IPs",
bandwith: "Unlimited",
price: "545.00",
priceon: "45.42",
orderlink: "URL"
},
VPS8: {
name: "Service E",
disk: "500GB",
ram: "32GB",
cpu: "8 Core",
setup: "Free",
ip: "12 IPs",
bandwith: "Unlimited",
price: "545.00",
priceon: "45.42",
orderlink: "URL"
},
VPS9: {
name: "Service E",
disk: "500GB",
ram: "16GB",
cpu: "8 Core",
setup: "Free",
ip: "12 IPs",
bandwith: "Unlimited",
price: "545.00",
priceon: "45.42",
orderlink: "URL"
},
VPS10: {
name: "Service E",
disk: "500GB",
ram: "16GB",
cpu: "8 Core",
setup: "Free",
ip: "12 IPs",
bandwith: "Unlimited",
price: "545.00",
priceon: "45.42",
orderlink: "URL"
}
};
return info;
}
function refreshInfo(key) {
var info = getServicesInfo();
$("#disk-val")
.html(info[key].disk);
$("#cpu-val")
.html(info[key].cpu);
$("#ram-val")
.html(info[key].ram);
$("#setup-val")
.html(info[key].setup);
$("#ip-val")
.html(info[key].ip);
$("#bw-val")
.html(info[key].bandwith);
$("#price-val")
.html(info[key].price);
$("#priceon-val")
.html(info[key].priceon);
$("#orderlink-val")
.html(info[key].orderlink);
}
function change_global_cloud_pkgs_href(key) {
var info = getServicesInfo();
$("#orderlink")
.attr("href", info[key].orderlink);
}
});
}
}
Похоже на проблему с округлением. Что произойдет, если вы сделаете это изменение?..
//return "VPS" + value;
return "VPS" + Math.round( 1 * value );