CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
anam
anam

Reputation: 3913

Get more than one ui slider on a document

how to get two jquery ui slider on a a page , when i used id slider for than one div only first slider is shown 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <link href="css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui.js"></script>

    .
            .
            .
            .
            .


            <div id="left_panel">
                <div id="panel_title">
                    Left Panel
                </div>
                <textarea id="txt" >        </textarea>
                <input type="checkbox" name="right_to_left" value="Bike">
                Right to Left
                <br/>
                <div id="font_family">
                    <!--[if !IE]> -->
                    <div class="notIE">
                        <!-- <![endif]-->
                        hello
                        <select>
                            <option>Apples</option>
                            <option selected>Pineapples</option>
                            <option>Chocklate</option>
                            <option>Pancakes</option>
                        </select>
                        <!--[if !IE]> -->
                    </div>
                    <!-- <![endif]-->
                </div>
                <br/>
                 Size:<div class="font_size" class="slider"></div>
            Opacity:<div class="font_opacity" class="slider"></div>
            </div>

            <div id="middle_panel">
                I am in middle

            </div>

        </div>

    </div>
</body>

Please suggest?html

Upvotes: 0

Views: 87

Answers (2)

Rituraj ratan
Rituraj ratan

Reputation: 10378

use by class , don't use with id, id must be unique

 Size:<div class="font_size slider"></div>
                Opacity:<div class="font_opacity slider"></div>

Upvotes: 1

me_digvijay
me_digvijay

Reputation: 5492

You can add as many as you want in one page and to make them work independently you should use uniques selectors and id is the best one. Here is a fiddle to make it clear.

Upvotes: 1

Related Questions