Бессмысленная стоимость в системе цен js

У меня есть ползунок цен, когда я обращался к исходным кодам, было максимум 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);
        }
    });
} 

}

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже на проблему с округлением. Что произойдет, если вы сделаете это изменение?..

//return "VPS" + value;
return "VPS" + Math.round( 1 * value );

Другие вопросы по теме