How do I make nothing selected in my jQuery UI slider by default?

Question

I'm using jQuery 2.1 and jQuery UI 1.11.1. I want to setup a slider on my page, which I do using the below JS

$(function() {
    $(".slider")
    .slider({
        max: 12,
        change: function(event, ui) { 
            alert(ui.value); 
        }
    })
    .slider("pips", {
        rest: "label"
    });
});

The issue is, it looks like the option "0" is initially selected and I would like the tick graphic not to appear on the slider until someone clicks somewhere -- http://jsfiddle.net/u72596ta/4/ . How do I set up my slider so taht no tick mark appears until someone clicks something?

Answer 1

Hide the handler after the slider created, then show it after value changed.

$(function() {
    $(".slider")
    .slider({
        max: 12,
        value:'',
        create: function(event, ui) {
              $(".ui-slider-handle").hide();
        },
        change: function(event, ui) { 
            $(".ui-slider-handle").show().focus();
            //alert(ui.value); 
        }
    })
    .slider("pips", {
        rest: "label"
    });
});    

http://jsfiddle.net/u72596ta/7/