Jquery ui.slider: add click event to show / hide the handle

Question

I am completely new to javascript and jquery. My programming knowledge ... nonexistent, I just started a few days ago with some simple tasks, such as replacing a css class or switching a div. So I want to apologize if I am on my feet, asking newbie questions here. But I hope someone can help me and solve my problem.

I need to implement some kind of visual analogue scale for polling; ui.slider is perfect for this. But I need the handle to be hidden by default. When the user clicks on the slider, the handle should appear in the correct position. It should be pretty simple - at least I hope - just by hiding the handle with css and changing it to a click event on the slider.

I use the following code snippet to wrap a normal div (I think jquery slider.js needs to be div) to my input elements (they should be - at least visually - replaced by a slider) and pass the value of the slider to the input elements (necessary for passing values in the form). what is working correctly. (I do this instead of just putting a div in my default DOM, because I cannot influence some php scripts that will generate polling form elements, etc.)

$(function() {
$.each($('.slider'),
function() {
    obj = $(this);
    obj.wrap('<div></div>');
    obj.parent().slider({
        change: function(event, ui) {
            $('input', this).val(ui.value);
        }
    });
});
});

CSS, , a.ui-slider-handle. (.ui-slider), css , . , - , DOM. ? : ? - , , ?

trainingjquery.com, , JS/jquery, /. ( , , , - , - ).

, .

Answer 1

, , ? , .

$(function() {
  $('.slider').wrap('<div></div>').parent().slider({
    change: function(event, ui) {
      $('input', this).val(ui.value);
      $('.ui-slider-handle').show();
    }
  });
});

, - jQuery , . , , jQuery :)