jquery convert multiple dropdowns to slider

Question

I am trying to replace a series of dropdowns with sliders. Everything seems to be working fine, however the sliders are acting very bizarre, not sure if it is because I have used a generic class rather than giving them all IDs?

Basically when I scroll a slider rather than the expected: 0,1,2,3 it is more along the lines of 1 first then 0 then 3 then 2...

Is this a simple case of incorrect setup or is it just not possible to use them in this way?

Thanks a lot, Anthony.

http://jsfiddle.net/Anth12/BnL93/1/

$(document).ready(function () {
    $('.DropDownToSlider').each(function () {
        var NewSlider = $(this).next(".DropDownSlider");

        var value = parseInt(NewSlider.text());
        $(this).val(value);
        NewSlider.text("");


        NewSlider.slider({
            value: value,
            min: 0,
            max: 3,
            slide: function (event, ui) {
                $(this).prev(".DropDownToSlider").val($(this).slider("value"));
                $(".SliderVal").text($(this).slider("value"));
            }
        });
    });
}); 

<select id="dd1" class="DropDownToSlider" style="">
    <option value="3">Admin</option>
    <option value="2">Basic</option>
    <option value="1">NoAuth</option>
    <option value="0">Delete</option>
</select>
<div id="ddslider1" class="DropDownSlider">1</div>
    <select id="dd2" class="DropDownToSlider" style="">
        <option value="3">Admin</option>
        <option value="2">Basic</option>
        <option value="1">NoAuth</option>
        <option value="0">Delete</option>
    </select>
<div id="ddslider2" class="DropDownSlider">2</div>

Answer 1

Is that what you want to achieve? http://jsfiddle.net/7f53c/17/

    $('.DropDownToSlider').each(function () {
        var NewSlider = $(this).next(".DropDownSlider");

        var value = parseInt(NewSlider.text());
        $(this).val(value);
        NewSlider .text("");


        NewSlider.slider({
            value: value,
            min: 0,
            max: 3,
            slide: function (event, ui) {                
                //$(this).prev(".DropDownToSlider").val($(this).slider("value"));
                //$(".SliderVal").text($(this).slider("value"));
                $(".SliderVal").text(ui.value);
            }
        });
    });