jQuery Range Slider is not loading in Modal Box

[nk-nareshkumar]

I am trying to load jQRangeSlider in a modal box. After load all jQRangeSlider scripts. Scripts loaded Successfully but Modal box is not showing with jQRangeSlider

JS Fiddle http://jsfiddle.net/9dAMa/1/

jQuery

$(document).ready(function () {
$("#sliderAjaxButton").on('click', function () {
    $.when(
    $.getScript("http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"),
    $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRuler.js")

    ).done(function () {
        alert("a");

        $("#sliderAjaxShow").rangeSlider({
            bounds: {
                min: 0,
                max: 100
            },
            defaultValues: {
                min: 55,
                max: 95
            },
            range: {
                min: 5,
                max: false
            }
        });
        $("#sliderAjax").modal('show');

    });
});

});

HTML:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="" id='sliderAjaxButton'>Show Slider Ajax</button>
<!-- Modal -->
<div class="modal fade" id="sliderAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body" id='sliderAjaxShow'>...</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>
    </div>
</div>

[ghusse]

I started to answer in your question on Stackoverflow.

https://stackoverflow.com/questions/24411886/jquery-range-slider-is-not-loading-in-modal-box/24424036?noredirect=1#comment37793000_24424036