Search code examples
jquery-uijquery-ui-slider

Jquery UI initially hide slider handle

I have set up a slider with jquery ui. I want the handle of the slider to be hidden initially and only show up, after the user clicks on the slider. I managed to hide the handle by setting display to none in the ui-slider-handle class. However, I am not able to change it back later on.

Solution

  • Consider the following code snippet, based on https://api.jqueryui.com/slider/ example.

    $(function() {
  $("#slider").slider({
    start: function() {
      $(".ui-slider-handle", this).show();
    }
  });
  var sw = $("#slider").slider("widget");
  $(".ui-slider-handle", sw).hide();
});
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

    Yes, you can hide the handle with CSS, to make it appear again would just mean over riding the CSS with an element style:

    $(".ui-slider-handle").css("display", "block");

    The example above is a bit more specific, yet essentially does the same thing. Once the Slider is initialized, you can call the widget method to access the various elements. We can use .hide() on the handle. When the User clicks on the Slider, this triggers the start event and we can .show() the handle at that time.

    If you have multiple sliders, the ui-slider-handle class might be too ambiguous, so using the selector context will help.

    Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" ).

    See More: