2015-12-17 31 views
0

我在我的應用程序中使用this noUiSlider。但我不能使用它的set方法並以編程方式設置它的值。我試圖如下:

$(this).noUiSlider.set([null, 2000000]); 

但它引發控制檯錯誤說$(this).noUiSlider.set([null, 2000000]); 不知道什麼是正確的做法。據their docs應該工作.. Here is the demo

HTML

<div class="form-group"> 
    <label>Price Range?</label> 
    <div class="ui-slider" id="price-slider" data-value-min="10000" data-value-max="4000000" data-value-type="price" data-currency="&#8377;" data-home="home" data-currency-placement="before"> 
    <div class="values clearfix"> 
     <input class="value-min" name="value-min[]" readonly> 
     <input class="value-max" name="value-max[]" readonly> 
    </div> 
    <div class="element"></div> 
    </div> 
</div> 

JS

if ($('.ui-slider').length > 0) { 
    $('.ui-slider').each(function() { 
    var step; 
    if ($(this).attr('data-step')) { 
     step = parseInt($(this).attr('data-step')); 
    } else { 
     step = 10; 
    } 
    var sliderElement = $(this).attr('id'); 
    var element = $('#' + sliderElement); 
    var valueMin = parseInt($(this).attr('data-value-min')); 
    var valueMax = parseInt($(this).attr('data-value-max')); 
    $(this).noUiSlider({ 
     start: [valueMin, valueMax], 
     connect: true, 
     range: { 
     'min': valueMin, 
     'max': valueMax 
     }, 
     step: step 
    }); 
    if ($(this).attr('data-value-type') == 'price') { 
     if ($(this).attr('data-currency-placement') == 'before') { 
     $(this).Link('lower').to($(this).children('.values').children('.value-min'), null, wNumb({ 
      prefix: $(this).attr('data-currency'), 
      decimals: 2, 
      thousand: ',' 
     })); 
     $(this).Link('upper').to($(this).children('.values').children('.value-max'), null, wNumb({ 
      prefix: $(this).attr('data-currency'), 
      decimals: 2, 
      thousand: ',' 
     })); 
     } else if ($(this).attr('data-currency-placement') == 'after') { 
     $(this).Link('lower').to($(this).children('.values').children('.value-min'), null, wNumb({ 
      postfix: $(this).attr('data-currency'), 
      decimals: 0, 
      thousand: ' ' 
     })); 
     $(this).Link('upper').to($(this).children('.values').children('.value-max'), null, wNumb({ 
      postfix: $(this).attr('data-currency'), 
      decimals: 0, 
      thousand: ' ' 
     })); 
     } 
    } else { 
     $(this).Link('lower').to($(this).children('.values').children('.value-min'), null, wNumb({ 
     decimals: 0 
     })); 
     $(this).Link('upper').to($(this).children('.values').children('.value-max'), null, wNumb({ 
     decimals: 0 
     })); 
    } 
    if ($(this).attr('id') == "price-slider") 
     $(this).noUiSlider.set([null, 2000000]); //error here, doesn't identify the function. 
    }); 
} 

任何幫助表示讚賞!

回答

1

Buggy滑塊。

有沒有可能將noUISlider更新到最新的version 8.2.1 - 2015-12-02 21:43:14?你有一年以上的時間。

而且它似乎沒有,當你在一個循環中與$(this).

用它運作良好,我刪除了所有的Link & To的東西,因爲我不知道這是否涉及滑塊和它導致錯誤。

見,如果這個工程:

if ($('.ui-slider').length > 0) { 
     $('.ui-slider').each(function() { 
     var step; 
     if ($(this).attr('data-step')) { 
      step = parseInt($(this).attr('data-step')); 
     } else { 
      step = 10; 
     } 
     var sliderElement = $(this).attr('id'); 
     var element = $('#' + sliderElement); 
     var valueMin = parseInt($(this).attr('data-value-min')); 
     var valueMax = parseInt($(this).attr('data-value-max')); 

//Get Slider old-fashioned way, since you already have its ID 
     var sss = document.getElementById(sliderElement) 

     noUiSlider.create(sss,{ 
      start: [valueMin, valueMax], 
      connect: true, 
      range: { 
      'min': valueMin, 
      'max': valueMax 
      }, 
      step: step 
     }); 

     if (sliderElement == "price-slider") 
      sss.noUiSlider.set([null, 2000000]); //error here 
     }); 
    } 
+0

好吧..我會更新它,解決此問題。謝謝你這麼多的幫助和時間.. :) –