CODEWITHSUNDEEP
jqueryhtml
raj
raj

Reputation: 35

multiple slider range with jquery

I want to create a dynamic slider range so that every time the user clicks the button the new slider appears. I have done it with clone() but seems it duplicates the previous slider with the same id. My question is how do i add slider in every click with different ids so that it will have different readings?

html

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

               </div>               
            </form>
     </div>

jquery

$(document).ready(function(){
var currentValue = $('#currentValue');
        $('#points').change(function(){
            currentValue.html(this.value);
        });         
        $('#points').change();

        $('#slide').click(function(){

            $('#for-slide').clone().appendTo('#slide-content');

        });
});


the above codes show the reading only for the first slider but not for others.
can anyone help please?

Upvotes: 1

Views: 310

Answers (1)

Jimmy Knoot
Jimmy Knoot

Reputation: 2388

Just add a different id to your clone like so:

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

EDIT

I'm still not quite sure what it is you want, but I am now assuming that you just want to generate a slider with a counter underneath it, inside the form element.

HTML structure:

<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>

Javascript:

$(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());
}

I've created a slider div prototype that you can clone as many times as you want, then when it is added it adds the click handler function to the input range.

JSFiddle: http://jsfiddle.net/nU7XU/5/

Upvotes: 1

Related Questions