Jquery range-slider which changes the content of a span element when the value changes

I am trying to make a jquery range slider for a web hosting website that will change the content of a span element when the range slider moves depending on the value. So for different values, different content on the span element. From what I found in the Internet, I saw a lot of examples of range sliders which show the value itself when they are being slided, but what I need is a slider which shows completely different contents. I use the foundation 6 classes for this range-slider. Please help me.

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

I won't post any jQuery code I got, since I can't really get to write the part where I can change the content of a span element for different values, like

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

This is taking me days already, I am trying to make this: http://imgur.com/a/Cu7qH . I need 6 steps for the plans. The only thing I have problem with is that I want the Monthly Price to change when the slider is on different plan.

Answers 1

  • An exemple with jquery ui slider 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();
    
                }
    }
    );
    

Related Articles