Javascript 更改时如何在div中显示范围值？

我想在更改时在div id=“output”中动态显示范围滑块的值。谢谢

     <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][]" >'
     )
);
});

$（'body'）。打开（“更改”，“范围\滑块”，函数（）{
var range_value=$（this.val（）；
});
$（'body'）。在（“单击”，“添加范围”，函数（）上）{
$（“#范围_添加_部分”）。追加
(
$(
'' + 
''
)
);
});

尝试在

'

处用

className

替换

id

，以防止重复的

id

在每次单击

时被追加到文档中。添加范围

元素；利用

.prev（）

，

.text（）

在

更改
事件中为
.range\u滑块
选择上一个
。输出
元素以将文本设置为下一个元素同级
的
值


$（'body'）。打开（“更改”，“范围”\u滑块”，函数（）{
var range_value=$（this.val（）；
$（this）.prev（“.output”）.text（范围值）
});
$（'body'）。在（“单击”，“添加范围”，函数（）上）{
$（“#范围_添加_部分”）。追加(
$(
'' +
''
)
);
});

添加范围
我花了2个小时才能得到输出，但不起作用。谢谢