'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