JQuery UI slider and Bootstrap modal.js

JQuery UI slider and Bootstrap modal.js

Hi,

I am trying to place a bunch of jqueryui siders in a modal dialog in bootstrap.js.  The sliders do not appear in the proper place in the dialog and in some cases extend out beyond the dialog borders, etc.  Does anyone know how to use JQueryUI slider inside of a modal.js dialog properly?

 My relevant code is the following:

HTML:

<div class="modal fade" id="tuning_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <!--button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button-->
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JAVASCRIPT:

 var _equalizer_button_clicked = function(){
        $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
        $('#tuning_modal').modal('show');





    }