CODEWITHSUNDEEP
javascriptjqueryhtml
Frezzy
Frezzy

Reputation: 15

Second range slider is not working in html

I have 4 range value sliders element in my form, and only the first one is working correctly.

Here is my code:

    $('#listenSlider').change(function() {
        $('.output b').text( this.value );
    }); 
    $('#listenSlider2').change(function() {
        $('.output2 b').text( this.value );
    }); 
    $('#listenSlider3').change(function() {
        $('.output3 b').text( this.value );
    }); 
    $('#listenSlider4').change(function() {
        $('.output4 b').text( this.value );
    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
    <div class="form-group">
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 1, "range": "min", "max": 5, "min": -1, "step": 0.01 }' data-plugin-slider-output="#listenSlider">
                <input id="listenSlider" type="hidden" value="1" />
            </div>
            <p class="output"> Voice Pitch: <b>1</b></p>
        </div>
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 0, "range": "min", "max": 14, "min": -14, "step": 0.1 }' data-plugin-slider-output="#listenSlider2">
                <input id="listenSlider2" type="hidden" value="0" />
            </div>
            <p class="output2"> Tones: <b>0</b></p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 1, "range": "min", "max": 5, "min": 0.1, "step": 0.01 }' data-plugin-slider-output="#listenSlider3">
                <input id="listenSlider3" type="hidden" value="50" />
            </div>
            <p class="output3"> Voice Rate: <b>1</b></p>
        </div>
        <div class="col-md-6">
            <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 1, "range": "min", "max": 1, "min": -1, "step": 0.1 }' data-plugin-slider-output="#listenSlider4">
                <input id="listenSlider4" type="hidden" value="50" />
            </div>
            <p class="output4"> Octaves: <b>1</b></p>
        </div>
    </div>
</div>

The first one is working correctly but the other 3 are not working at all.

Upvotes: 0

Views: 757

Answers (1)

Dipen Soni
Dipen Soni

Reputation: 224

hi i think you need to refer following link for range slider. range slider

this can be helpful foe you just check it out and tell me.

Upvotes: 1

Related Questions