george george - 6 months ago 29
HTML Question

Jquery Ui range-slider content show on step

I have a problem showing content based on the current step of jQuery UI range slider, for example on second step I need only show second-step-content

http://codepen.io/anon/pen/LNoXqX

HTML:

<span class="becky">first-step</span>
<span class="becky">second-step</span>
<span class="becky">third-step</span>
<span class="becky">fourth-step</span>
<span class="becky">fifth-step</span>

<div id="slider-2"></div>

<!-- Content that I need show -->
<span id="first-step-content">first-step-content</span>
<span id="second-step-content">econd-step-content</span>
<span id="third-step-content">third-step-content</span>
<span id="fourth-step-content">fourth-step-conten</span>
<span id="fifth-step-content">fifth-step-content</span>


Code:

$(function() {
$( "#slider-2" ).slider({
min: 4,
max: 20,
value: 12,
step: 4,
animate:"slow",
orientation: "horizontal"
});
});

Answer

First, you need a way to translate the scroll value to a span, using "first", "second" makes this difficult, as does using an id. So add data- attributes, ie:

    <div id="slider-2"></div>
       <span data-step='1'>first-step-content</span> 
       <span data-step='2'>second-step-content</span>
       <span data-step='3'>third-step-content</span> 
       <span data-step='4'>fourth-step-conten</span>
       <span data-step='5'>fifth-step-content</span>  
    </div>

Next, listen to the .slide event of the slider, which gives you the position in ui.value then use this to show the relevant content:

$("#slider-2").slider({
    min: 1,
    max: 5,
    value: 1,
    step: 1,
    animate:"slow",
    orientation: "horizontal",
    slide: function( event, ui ) {
        // Convert value to index
        $("span[data-step]").hide()
        $("span[data-step='" + ui.value + "']").show()
    }
});

For simplicity, I've changed the min/max/value/step so there's a 1-1 with the value and data-step. In practice, I'm assuming you've used min/max/step so that the scroll appears under the text - you just need to convert ui.value to data-step (or possibly use different values for data-step).