jquery ui slider populating the value

Question

I'm using jquery ui to set up some sliders. I have many sliders, but I'm trying to minimize code. Here is how I have the slider setup in html:

    <div class="budget_icon-wrapper">
        <div data-name="space_def" class="icon">
            <img class="info" src="images/info.png" />
            <img src="images/space-icon.png" />
        </div>
        <div id="space-item" class="space-item slider"></div>
        <div id="space_item-value" class="item-txt">$3.00</div>
    </div>

the div with a class of 'slider' is the slider. In the div next to it I have different values for each slider, this happens to be 3 dollars. What I'd like to do is pull the value out of that div (in this case 3) and have that be the value of the slider.

The script I tried but doesn't quite work is this:

$(".slider").each(function() {
    value = parseInt($(this).siblings(".item-txt").text(),10);


    $(this).slider({
        animate: "fast",
        max: 25,
        min: 0,
        value: value,
        range: "min"
    });
});

Thanks for any help with this.

Answer 1

Change

value = parseInt($(this).siblings(".item-txt").text(),10);

to

value = parseInt($(this).siblings(".item-txt").text().substring(1),10);

jsFiddle example

parseInt is returning NaN since the $ is causing it to not return what you want. As the docs on parseInt note, "If the first character cannot be converted to a number, parseInt returns NaN."

Update: As requested, if you want the value of 3.00 just use value = $(this).siblings(".item-txt").text().substring(1);