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元素的内容

回答

相关问题