Bootstrap Range: How to append bootstrap range?

I want to append the bootstrap range. The problem is javascript append is adding plain html elements only. It doesn't get the style using the $("#slide_add").slider({}); in jquery/javascript

HTML:

    <input id="slide_default" type="text" data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-value="[0,5]" />

    <div id="range_added_section"></div>

    <input type="button" value="Add Range" class="add_range" >

JAVASCRIPT APPEND:

<script type="text/javascript">

$("#slide_default").slider({});

//ADD RANGE
$('body').on("click",".add_range",function(){

    $('#range_added_section').append
    (
        $(
            '<input id="slide_default" type="text" data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-value="[0,5]" />'
         )
    );
});

</script>

Answers 1

  • JAVASCRIPT: [SOLVED]

    <script type="text/javascript">
    
    $("#slide_default").slider({});
        //ADD RANGE
        $('body').on("click",".add_range",function(){
    
            var elem = $('<input id="slide_default" type="text" data-slider-min="1" data-slider-max="" data-slider-step="1" data-slider-value="[0,5]" />'); 
    
            $('#range_added_section').append(elem); elem.slider({});
        });
    
    </script>
    

Related Articles