How to display range value in div on change?

Question

I want to display the dynamically value of range slider in div id="output" when on change. Thanks

 <div id="outcome_main_section"> <div id="outcome_section_2"> <div id="range_added_section"></div> <input type="submit" name="btn_submit"> <input type="button" class="add_range" value="Add Range"> </div> </div>

Javascript

 $('body').on("change",".range_slider",function (){ var range_value = $(this).val(); }); $('body').on("click",".add_range",function(){ $('#range_added_section').append ( $( '<div id="output"></div>' + '<input class="range_slider" type="range" min="1" max="100" value="1" step="1" name="range_value[range_value][]" >' ) ); });

guest271314 · Accepted Answer · 2016-03-16 01:11:22Z

Try substituting className for id at '<div id="output"></div>' to prevent duplicate id being appended to document at each click of .add_range elements; utilize .prev(), .text() within change event for .range_slider to select previous .output element to set text to value of next element sibling input type="range"

$('body').on("change", ".range_slider", function() { var range_value = $(this).val(); $(this).prev(".output").text(range_value) }); $('body').on("click", ".add_range", function() { $('#range_added_section').append( $( '<div class=output></div>' + '<input class=range_slider type=range ' + 'min=1 max=100 value=1 step=1 name=range_value[range_value][] >' ) ); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="add_range">add range</div> <div id="range_added_section"></div>

Collectives™ on Stack Overflow

How to display range value in div on change?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related