jQuery UI Slider范围和复选框合并

Question

我们如何动态组合范围滑块和复选框？通过单击特定复选框，我们必须在滑块上看到更改。

  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 10,
      values: [ 1, 4 ],
     slide: function( event, ui ) {
            $( "#amount" ).val( ui.values[ 0 ] );
            $( "#amount2" ).val( ui.values[ 1 ] );
        }
    });

    $("#amount").change(function() {
        $("#slider-range").slider('values',0,$(this).val());
    });

    $("#amount2").change(function() {
        $("#slider-range").slider('values',1,$(this).val());
    });



  } );


  </script>


<input type="checkbox" id="amount" value="3">
<input type="checkbox" id="amount2" value="9">
<div id="slider-range"></div>