How to show content with jQuery UI Slider?

Question

Example:

I have a problem about how to show content with jQuery UI Slider on each step and remove previous content.

                      <div id="range-slider"></div> <!-- ui jquery range slider-->

                        <!-- block of content -->
                        <div class="items">

                            <!-- first-block -->
                            <div class="slider-content">
                                <span>lorem ipsum:</span>
                                <span class="price">30 000</span>
                            </div>

                            <!-- second-block -->
                            <div class="slider-content">
                                <span>lorem ipsum:</span>
                                <span class="price">30 000</span>
                            </div>

                        </div>

 $("#range-slider").slider({
        max: 20,
        min: 4,
        step: 4,
        change: function (event, ui) {

        }
    });

Answer 1

In your change function, following this code

$('.items div').removeClass('active');
$('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');

and add slide callback

slide: function(event, ui) {
    $('.items div').removeClass('active');
    $('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');  
}

Here's a fiddle

style #range-slider, ui-slider-range, ui-slider-handle, ui-state-active, ui-state-hover