JQuery UI Slider doesn't work with "value: x", only with "values: [x]"

Question

Here's the JSFiddle Link: (http://jsfiddle.net/jforman07/qaU7K/222/).

Problem: The slider bar doesn't move

Here's the JavaScript:

$(document).ready(function () {
 $("#slider").slider({
    range: "min",
    value: 50,
    min: 1,
    max: 100,

    slide: function (event, ui) {

         $("input.sliderValue[data-index=0]").val("$" + ui.values[0] + "k");

        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');

            $("#slideText").html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
        };
        setTimeout(delay, 0);
     }
 });


});

If I change

value: 50,

to

values: [50],

then the slider bar works, but then the green shading on the slider bar disappears - as seen in this JSFiddle - http://jsfiddle.net/jforman07/qaU7K/223/

Answer 1

this seems to work:

$(document).ready(function () {
$("#slider").slider(options = {
    range: "min",
    value: 50,
    min: 1,
    max: 100,

    slide: function (event, ui) {


        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');

            $("#slideText").html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
             $(".sliderValue").val("$" + ui.value + "k");
        };

        setTimeout(delay, 0);


    },
    create : function (event, ui){
     $(".sliderValue").val("$" + options.value+ "k");

    }
});


});

A: use the create option as a callback function when the slider is done. the UI is empty, so we have to name our options, as you can see in params it's (options = {...}) this will allow us to fetch the preset value by calling options.value B: you should make the slider label update while in the delay function.