CODEWITHSUNDEEP
javascriptjquery
Nick Weavers
Nick Weavers

Reputation: 564

How to get jQuery Simple Slider to show initial value?

I can't seem to get the jQuery Simple Slider (http://loopj.com/jquery-simple-slider/) to initialse a span that shows the slider value before it is dragged. The span does get updated as soon as the slider is dragged and the code to update the span is in the same bind, so it looks to me like the slider:changed event gets caught but the slider:ready doesn't.

<form>
    <input name="slider" 
           type="text" 
           data-slider="true" 
           data-slider-highlight="true" 
           data-slider-step="1" 
           data-slider-range="1,99" 
           value="20">  
</form>



$("[data-slider]")
    .each(function () {
        var range;
        var input = $(this);
        $("<span>").addClass("output")
            .insertAfter(input);
        range = input.data("slider-range").split(",");
        $("<span>").addClass("range")
            .html(range[0])
            .insertBefore(input);
        $("<span>").addClass("range")
            .html(range[1])
            .insertAfter(input);
        $(this).bind("slider:ready slider:changed", function (event, data) {
            $(this).nextAll(".output:first")
                .html(data.value.toFixed(2));
        })
    });

However, the examples given by the simpleslider author do appear to show the initial slider values, but I just can't see what I'm doing differently that prevents mine working.

Please see my fiddle here http://jsfiddle.net/nickweavers/77c89pju/23/

Upvotes: 0

Views: 488

Answers (1)

starless13
starless13

Reputation: 424

You can add the value for first time manually, i think that's the simpler approach.

http://jsfiddle.net/77c89pju/26/

The code i write in the end of the anonymous function called in each loop of "data-slider" is:

$(this).nextAll(".output:first").html($(this).val());

Upvotes: 1

Related Questions