george george - 5 months ago 20
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


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


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


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>  

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:

    min: 1,
    max: 5,
    value: 1,
    step: 1,
    orientation: "horizontal",
    slide: function( event, ui ) {
        // Convert value to index
        $("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).