Jquery range - 値が変更されたときにスパン要素の内容を変更するスライダー

Question

Webスライダーのコンテンツを変更するWebホスティングWebサイトのjquery範囲スライダーを作成しようとしています。値。したがって、異なる値の場合、span要素の内容が異なります。私がインターネットで見つけたものから、スライダされたときに値そのものを示す範囲スライダの例がたくさん見られましたが、必要なものは全く異なる内容を示すスライダです。私はこの範囲スライダーの基礎6クラスを使用します。私を助けてください。

<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> 

私は本当に私が異なる値のためのspan要素の内容を変更することができる部分を書くために得ることができないので、私は

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

のように、私が得たすべてのjQueryのコードを投稿しません

これはすでに数日かかるので、私はこれを作ろうとしています：http://imgur.com/a/Cu7qH。私は計画のために6つのステップが必要です。私が問題を抱えているのは、スライダが別の計画にあるときに月額価格を変更したいだけです。それは少なくともあなたのタイトルが求めているものを行い

Answer 1

例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(); 

      } 
} 
); 

Answer 2

あなたが探しているが、ここでのオフに行くために何かしているかを正確にわからない..

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/