如何在滑块上切换复选框？

Question

I have a simple JQuery Ui slider that contains hidden checkbox inside. I need to add the ability to toggle slider and thus change checkbox value.

How can I do this?

Codepen example.

HTML

<div style="margin-top: 50px"></div>

<div class="col-md-1">
  <div id="slider">
    <input type="checkbox">
  </div>
</div>

JS

  $(function() {
    $( "#slider" ).slider({
      step : 99,
      animate : 'slow'
    });
  });

Answer 1

You can check and uncheck by moving the slide like this

  $(function() {
    $( "#slider" ).slider({
      min: 0,
      max: 1,
      animate : 'slow',
      slide: function( event, ui ) {
        if(ui.value > 0){
          $("#slider input[type='checkbox']").prop("checked", true);
        } else {
          $("#slider input[type='checkbox']").prop("checked", false);
        }
      }
    });
  });

Answer 2

So you need to exam the value when the slider stops. This can be done like so:

  $(function() {
    $("#slider").slider({
      step: 99,
      animate: 'slow',
      stop: function(e, ui) {
        if (ui.value > 0) {
          $("#slider input[type='checkbox']").prop("checked", true);
        }
      }
    });
  });

The value will be either 0 or 100. So when the slider is to the right, it's at 100% value or some value. It will be more than 0, so that's what we check for.

See more about this event function: http://api.jqueryui.com/slider/#event-stop