noUiSlider控制按钮

Question

需要noUiSlider的帮助。 在页面上我们有多个范围滑块，每个人都必须正确工作并在其字段上输出值。 此任务已解决，但控制按钮右侧或左侧的点击范围移动不起作用。 如何为页面上的每个范围滑块制作工作按钮？

            <div class="row">
              <div class="col-sm-4">
                <p>time to call, сек.:</p>
                <div class="col-sm-10 range-wrapper">
                  <a href="#" class="btn pull-left range-down gray-color"><i class="fa fa-minus"></i></a>
                  <div class="pull-left col-sm-7 range range-time" id="range-time"></div>
                  <a href="#" class="btn pull-right range-up gray-color"><i class="fa fa-plus"></i></a>
                </div>
                <div class="see ta-c">0.</div>
              </div>
              <div class="col-sm-4">
                <p>delay call <i class="fa fa-info-circle blue-color" data-toggle="tooltip" data-placement="top" title="Information"></i></p>
                  <div class="col-sm-10 range-wrapper">
                    <a href="#" class="btn pull-left range-down gray-color"><i class="fa fa-minus"></i></a>
                    <div class="pull-left col-sm-7 range range-time" ></div>
                    <a href="#" class="btn pull-right range-up gray-color"><i class="fa fa-plus"></i></a>
                  </div>
                  <div class="see ta-c">0</div>
              </div>
            </div>





var rangeTime = $('.range-time');
function createSlider (slide) {
    var slider = noUiSlider.create(sliders[slide], {
        start: 0,
        connect: "lower",
        orientation: "horizontal",
        step: 1,
        range: {
            'min': 0,
            'max': 30
        },
            format: {
              to: function ( value ) {
                return value;
              },
              from: function ( value ) {
                return value.replace(',', '');
              }
            }
    });

    // add the slider object to the slider element
    // using data for future reference
    $(sliders[slide]).data('slider', slider);


    slider.on('change', function( values, handle ) {
        // on change of the slider, find the next element and set its value
        $(event.target).closest('.range-time').parent('.range-wrapper').siblings('.see').text(values[handle] + ' сек.');
        console.log(event.target);
    });



    for (var i = 0 ; i < rangeTime.length; i++) {

    slider.on('change', function( values, handle ) {

            $('.range-down').on('click', function(e){
                e.preventDefault();
                rangeTime[handle].noUiSlider.set(i-1);
            });

            $('.range-up').on('click', function(e){
                e.preventDefault();
                rangeTime[handle].noUiSlider.set(i+1);
            });

        });

    }

}

var sliders = $('.range-time');
for ( var i = 0; i < sliders.length; i++ ) {
    createSlider(i);
}