CODEWITHSUNDEEP
jqueryjquery-uisliderdefault
user7055375
user7055375

Reputation:

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

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?

Upvotes: 1

Views: 287

Answers (3)

Eliellel
Eliellel

Reputation: 1446

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/

Upvotes: 1

j08691
j08691

Reputation: 208002

You can hide the slider handle with:

.ui-slider-handle {
  display: none;
}

And if you add $('.ui-slider-handle').show() to your change method it will appear when it's clicked on.

jsFiddle example

Upvotes: 0

RAHUL S R
RAHUL S R

Reputation: 1579

Simply just remove the classes 

 $(function() {
        $(".slider")
        .slider({
            max: 12,
            change: function(event, ui) { 
                alert(ui.value); 
            }
        })
        .slider("pips", {
            rest: "label"
        });
      $('.ui-slider-pip-initial').removeClass('ui-slider-pip-selected');
        $('.ui-slider-pip-initial').removeClass('ui-slider-pip-initial');
    });

Upvotes: 0

Related Questions