Работа над небольшой формой расчета, где пользователь, просто перетаскивая слайдер, может рассчитать свой заработок. Но почему-то форма показывается дважды, и только один из них работает. Например:
Первый слайдер не работает вообще и не выполняет вычисления, но второй работает так, как должно быть. Итак, теперь я хочу удалить первый неработающий слайдер. Это целый HTML код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="https://public.mym.fans/design/styles/framework.css">
<link rel="stylesheet" type="text/css" href="https://cdn.plyr.io/3.4.7/plyr.css">
<script type="text/javascript" src="https://public.mym.fans/design/scripts/jquery.js?v=1"></script>
<script type="text/javascript" src="https://public.mym.fans/design/scripts/plugins.js?v=3"></script>
</head>
<body>
<div id="page-content" class="page-content" style="min-height: 561px;">
<!-- ionrangeSlider -->
<link rel="stylesheet" href="https://public.mym.fans/design/scripts/ion-rangeSlider-220/css/ionrangeSlider.css" />
<link rel="stylesheet" href="https://public.mym.fans/design/scripts/ion-rangeSlider-220/css/ionrangeSliderskinHTML5.css" />
</br>
</br>
</br>
</br>
<div class="heading-block estimation_rev" style="background-image: url(https://d1yei2z3i6k35z.cloudfront.net/156728/5ea9bab7e6f9b_ADBQnb_t20_4EXQna-min.jpg);">
<h2 class="thin no-bottom animate-zoom" data-sr-id="14" style="; visibility: visible; -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s; ">Estimate your revenue</h2>
<h5 class="small-text animate-fade" data-sr-id="2" style="; visibility: visible; -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s; transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s; ">Select your number of followers</h5>
<p class="larger-text thin half-top full-bottom animate-fade" data-sr-id="3" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.1, 0.2, 0.1, 1) 0s; ">
<span class="irs js-irs-0 irs-with-grid"><span class="irs"><span class="irs-line" tabindex="0"><span class="irs-line-left"></span><span class="irs-line-mid"></span><span class="irs-line-right"></span></span><span class="irs-min" style="display: none; visibility: hidden;">0</span><span class="irs-max" style="display: none; visibility: visible;">1</span><span class="irs-from" style="visibility: hidden;">0</span><span class="irs-to" style="visibility: hidden;">0</span><span class="irs-single" style="left: -0.535332%;">100 000 followers</span></span><span class="irs-grid" style="width: 94.2184%; left: 2.79079%;"><span class="irs-grid-pol" style="left: 0%"></span><span class="irs-grid-text js-grid-text-0" style="left: 0%; margin-left: -1.17773%;">0</span><span class="irs-grid-pol small" style="left: 20%"></span><span class="irs-grid-pol small" style="left: 15%"></span><span class="irs-grid-pol small" style="left: 10%"></span><span class="irs-grid-pol small" style="left: 5%"></span><span class="irs-grid-pol" style="left: 25%"></span><span class="irs-grid-text js-grid-text-1" style="left: 25%; visibility: visible; margin-left: -4.06852%;">250 000</span><span class="irs-grid-pol small" style="left: 45%"></span><span class="irs-grid-pol small" style="left: 40%"></span><span class="irs-grid-pol small" style="left: 35%"></span><span class="irs-grid-pol small" style="left: 30%"></span><span class="irs-grid-pol" style="left: 50%"></span><span class="irs-grid-text js-grid-text-2" style="left: 50%; visibility: visible; margin-left: -4.17559%;">500 000</span><span class="irs-grid-pol small" style="left: 70%"></span><span class="irs-grid-pol small" style="left: 65%"></span><span class="irs-grid-pol small" style="left: 60%"></span><span class="irs-grid-pol small" style="left: 55%"></span><span class="irs-grid-pol" style="left: 75%"></span><span class="irs-grid-text js-grid-text-3" style="left: 75%; visibility: visible; margin-left: -4.06852%;">750 000</span><span class="irs-grid-pol small" style="left: 95%"></span><span class="irs-grid-pol small" style="left: 90%"></span><span class="irs-grid-pol small" style="left: 85%"></span><span class="irs-grid-pol small" style="left: 80%"></span><span class="irs-grid-pol" style="left: 100%"></span><span class="irs-grid-text js-grid-text-4" style="left: 100%; margin-left: -4.92505%;">1 000 000</span></span><span class="irs-bar" style="left: 2.89079%; width: 9.42184%;"></span><span class="irs-bar-edge"></span><span class="irs-shadow shadow-single" style="display: none;"></span><span class="irs-slider single" style="left: 9.42184%;"></span></span><input type="text" id="range" value="" name="range" onchange="estimate()" class="irs-hidden-input" tabindex="-1" readonly="">
</p>
<h5 class="small-text animate-fade line-height-20" data-sr-id="4" style="; visibility: visible; -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s; transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s; ">Estimated revenue = between <span class="font-size-20" id="estim_bottom">9000€</span> and <span class="font-size-20" id="estim_top">45000€</span> per month*</h5>
<div class="overlay dark-overlay"></div>
</div>
<div class="footer_condition content">*Based on an average subscription rate between 1% and 5% of your community. Does not include the MYM charge.</div>
<script type="text/javascript">
$(function () {
$("#range").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 1000000,
from: 100000,
from_min: 5000,
step: 10000,
postfix: " followers",
grid: true
});
});
function estimate()
{
var slider = $("#range").data("ionRangeSlider");
var from = slider.result.from;
// Calculer les revenus
var rev_bottom = Math.round(((from*1)/100)*9);
$('#estim_bottom').text(rev_bottom+'€');
var rev_top = Math.round(((from*5)/100)*9);
$('#estim_top').text(rev_top+'€');
}
</script>
</div>
</div>
</body>
</html>
Некоторая помощь, почему показывается второй неработающий слайдер и как его удалить? Большое спасибо. Это сайт , откуда я получаю этот элемент. Работает JSFiddle с кодом.