使用jquery的多滑块范围

我想创建一个动态滑块范围，这样每当用户单击按钮时，新的滑块就会出现。我已经用clone（）完成了，但它似乎复制了上一个具有相同id的滑块。我的问题是，如何在每次单击中使用不同id添加滑块，以便它具有不同的读数

html

---

只需向克隆添加不同的id，如下所示：

$('#for-slide').clone().attr('id','some_unique_id').appendTo('#slide-content');

编辑

我仍然不太确定您想要的是什么，但我现在假设您只想在表单元素中生成一个在其下方带有计数器的滑块

HTML结构：

<button id="slide">Range</button>
<div id="slide-content"></div>
<div id="for-slide">
    <h3 class="first-header">Points</h3> 
    <form id="form">
        <div class="slider-rating"> 
            <span>0</span>
            <input class="points" type="range" min="0" max="10" value="0" />  
            <span>10</span>
            <article class="currentValue" style="margin-left:10%;">0</article>
        </div>
    </form>
</div>

范围
要点
0
10
我尝试了上面的代码，但阅读没有显示添加滑块的功能。这里有一个链接：啊，我知道你现在想做什么了，JSFIDLE帮助很大，我将用abit编辑我的答案。
$('#for-slide').clone().attr('id','some_unique_id').appendTo('#slide-content');

<button id="slide">Range</button>
<div id="slide-content"></div>
<div id="for-slide">
    <h3 class="first-header">Points</h3> 
    <form id="form">
        <div class="slider-rating"> 
            <span>0</span>
            <input class="points" type="range" min="0" max="10" value="0" />  
            <span>10</span>
            <article class="currentValue" style="margin-left:10%;">0</article>
        </div>
    </form>
</div>

$(document).ready(function () {
    var sliderPrototype = $(
        '<div class="slider-rating">'+
            '<span>0</span><input class="points" type="range" min="0" max="10" value="0" /><span>10</span>'+
            '<article class="currentValue" style="margin-left:10%;">0</article>'+
         '</div>');
    $('.points').change(sliderChangeHandler);

    $('#slide').click(function () {
        var newSlider = $(sliderPrototype).clone();
        newSlider.find('.points').change(sliderChangeHandler);
        newSlider.appendTo('#form');
    });
});

function sliderChangeHandler() {
    $(this).parent().find('.currentValue').html($(this).val());
}