具有Handle值的多个noUI滑块

Question

我无法使用多个滑块进行多重处理。 在我的情况下，手柄无法正常工作，但滑块工作正常。 我的脚本有问题吗？有人可以帮我吗？

// This is an old project so i need to add this
		
var $j = jQuery.noConflict();

// Budget Slider 
		var snapSlider = document.getElementById('budget');
		
		noUiSlider.create(snapSlider, {
			start: [ 1000, 6000 ],
			connect: true,
			format: wNumb({
				decimals: 0,
				thousand: '',
				prefix: '$',
			}),
			range: {
				'min': 0,
				'max': 10000
			}
		});
		
		var snapValues = [
			document.getElementById('budget-lower'),
			document.getElementById('budget-upper')
		];
		
		snapSlider.noUiSlider.on('update', function( values, handle ) {
			snapValues[handle].innerHTML = values[handle];
		});
		
		// monthly-payment
		var paymentSlider = document.getElementById('monthly-payment');
		
		noUiSlider.create(paymentSlider, {
			start: [ 1000, 6000 ],
			connect: true,
			format: wNumb({
				decimals: 0,
				thousand: '',
				prefix: '$',
			}),
			range: {
				'min': 0,
				'max': 10000
			}
		});
		
		var paymentValues = [
			document.getElementById('payment-lower'),
			document.getElementById('payment-upper')
		];
		
		paymentSlider.noUiSlider.on('update', function( values, handle ) {
			paymentValues[handle].innerHTML = values[handle];
		});

/* range slider */
.range-slider { margin:20px 0;  background: #18366a; border: none; box-shadow: none; border-radius: 50px; }
.range-slider.noUi-horizontal { height:14px;}
.range-slider.noUi-horizontal .noUi-handle { top: -3px; width: 20px; height: 20px; border-radius: 50%; cursor:e-resize; }
.range-slider.noUi-horizontal .noUi-handle:focus { outline:none;}
.range-slider .noUi-connect { background: #fb993f; border-radius:100px;}
.range-slider .noUi-handle { background: #18366a; border:5px solid #fb993f; box-shadow:0px 1px 2px 2px rgba(0,0,0,0.3); border-radius:50%;}
.range-slider .noUi-handle:before,
.range-slider .noUi-handle:after { display:none;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>

<div class="slider-wrap">
      <div class="slider-value budget-value text-center">Min <strong class="example-val" id="budget-lower"></strong></div>
      <div id="budget" class="range-slider"></div>
      <div class="slider-value budget-value text-center">Max <strong class="example-val" id="budget-upper"></strong></div>
</div>
  
<div class="slider-wrap">
    <div class="slider-value paymnet-value text-center">Min <strong class="example-val" id="paymnet-lower"></strong></div>
    <div id="monthly-payment" class="range-slider"></div>
    <div class="slider-value paymnet-value text-center">Max <strong class="example-val" id="paymnet-upper"></strong></div>
</div>