Jquery範圍滑塊，當值變化時改變span元素的內容

我想爲一個虛擬主機網站製作一個jquery範圍滑塊，當範圍滑塊移動時會改變span元素的內容，具體取決於值。因此，對於不同的值，span元素上的不同內容。從我在互聯網上發現的東西中，我看到很多範圍滑塊的例子，它們在滑動時顯示其本身的價值，但我需要的是一個顯示完全不同內容的滑塊。我爲這個範圍滑塊使用了基礎6類。請幫幫我。Jquery範圍滑塊，當值變化時改變span元素的內容

<div class="range-slider round slidsec" data-slider data-options="step: 20;"><span class="slider-handle justr" data-slider-handle role="slider" tabindex="1"> 
     <img class="sliderhandl" src="slider-handle-small.png"> 
     </span><span class="slider-fill fillsect" data-slider-fill></span> 

</div>

我將不會發布任何jQuery代碼我得到了，因爲我真的不能去寫，我可以改變不同的值跨度元素的內容的一部分，就像

slide:function(event, ui) { 
    if (ui.value < 33)

這需要我幾天的時間，我正在試着做這個：http://imgur.com/a/Cu7qH。我需要6個步驟的計劃。我唯一遇到的問題是，當滑塊處於不同的計劃時，我希望每月價格發生變化。

來源

2017-03-05 Vladimir B.

jquery UI滑塊的例子個fiddle

var valMap = [1,2,3,4]; 
$("#slider").slider(
{ 
      max: valMap.length - 1, 
      min: 0, 
      values: [0], 
      slide: function(event, ui) { 
      $("#resolution").val(valMap[ui.values[0]]); 
      $('span').hide(); 
      $('span').filter('[data-n="'+ui.value+'"]').show(); 

      } 
} 
);

來源

2017-03-05 01:13:29

謝謝你這麼多的人滑塊的不同值的跨度元素的不同的文字！非常感謝！ –

歡迎，如果這解決了你的問題，它解決了 –

完成！再次感謝！ –

不完全相信你正在尋找，但這裏的東西走下車的。它至少做你的標題叫什麼..

的Html

<div id="slider"></div> 
<span id="value">test</span>

的Javascript

$(function() { 
    $('#slider').slider({ 
     range: "max", 
     min: 100, 
     max: 1000, 
     value: 600, 
     step: 20, 
     slide: function(event, ui) { 
      $('#value').text(ui.value); 
     } 
    }); 
    $('#value').text($('#slider').slider('value')); 
});

https://jsfiddle.net/nkqryqLd/

來源

2017-03-05 01:02:17 Rick

非常感謝，發現這是已經，雖然，我只需要對 –

Jquery範圍滑塊，當值變化時改變span元素的內容

回答

相關問題