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

Question

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.

Answer 1

Not exactly sure what you are looking for but here's something to go off of.. It at least does what your title is asking..

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/

Answer 2

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

            }
}
);