'Meaningless value in js price system
I have a price slider, when I accessed the source codes, there were a maximum of 5 products, but I arranged it to be 10 in total. Now when I scroll it shows a certain number of meaningless values and the content does not change
Step 1 : https://prnt.sc/qO-teP8WUPDW (No Problem) ... Step 4 : https://prnt.sc/QeP2dCz8pXCK (Problem) ... Step 7 : https://prnt.sc/lrK7-cByx0h7 (Problem)
Only in step 4 and 7 the content does not change and the package name changes meaninglessly. Below are the codes I used
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);
}
});
}
}
Solution 1:[1]
Looks like a rounding issue. What happens if you make this change?..
//return "VPS" + value;
return "VPS" + Math.round( 1 * value );
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | 3in0 |
