jquery noUiSlider multiply slider value

Question

Is it possible to get the value separately from each slider ? I have been working for several days now, and I'm about to be desperate. I hope that there is a kind soul who can help me.

Here is my code:

    <div class="slider"></div><br>
<div class="slider"></div><br>
<div class="slider"></div><br>
<div class="slider"></div><br>
<div class="slider"></div>

<script>
    $(function(){
        $('.slider').each(function () {
            $("<span>")
                .addClass("output")
                .insertAfter($(this));
            }).noUiSlider({
                 range: [0,30]
                ,start: 15
                ,handles: 1
                ,step: 1
                ,connect: 'lower'
                ,serialization: {
                    to: [$('.output'), "html"], 
                    resolution: 1 
                }
        })
    });

Answer 1

You need to create a unique class name instead of using "output" for all sliders. One way could be to use a counter variable and suffix that to output so you get a unique name. Other approach is to set a u unique ID on each DIV and suffix that id to output. You can use $(this).attr("id") inside to get the id. Also are you not supposed to keep noUiSlider also inside the for loop? Currently it's outside so I am not sure if you missed that or that's how its is working. Hope this helps.