Uncertain about implementation of Values method in Slider

Uncertain about implementation of Values method in Slider

Heya,

I have already looked through the knowledgebase and searched around, yet I couldn't find a working solution. I'm guessing I'm missing something simple yet I'm not sure what.

I use the Values method of Jquery Slider to set a range of values. I adapted the demoscript, I edited the names, but I'm not sure why the second slider (with the values in it) is not showing. I appreciate it if you can point me in the right direction.

Code below:

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>jQuery UI Slider - Snap to increments</title>
        <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
        <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
        <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <style type="text/css">
            #demo-frame > div.demo { padding: 10px !important; };
        </style>
        <script type="text/javascript">
        $(function() {
            $("#slider").slider({   
           
                value:100,
                min: 0,
                max: 500,
                step: 50,
                slide: function(event, ui) {
                    $("#amount").val('$' + ui.value);
                }
            });
            $("#amount").val('$' + $("#slider").slider("value"));
        });
        </script>
       
            <script type="text/javascript">
        $(function() {
    $(".slider2").slider({ values: [250,500,1000, 2500, 5000, 10000, 25000, 50000, 100000, 150000]


                slide: function(event, ui) {
                    $("#amount2").val('$' + ui.value);
                }
            });
            $("#amount2").val('$' + $(".slider2").slider("value"));
        });
        </script>
       
            <script type="text/javascript">
        $(function() {
            $("#slider3").slider({
                value:100,
                min: 0,
                max: 500,
                step: 50,
                slide: function(event, ui) {
                    $("#amount3").val('$' + ui.value);
                }
            });
            $("#amount3").val('$' + $("#slider3").slider("value"));
        });
        </script>
    </head>
    <body>

    <div class="demo">

    <p>
    <label for="amount">Donation amount ($50 increments):</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider"></div>

    <p>
    <label for="amount">Donation amount ($50 increments):</label>
    <input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider2"></div>


    <p>
    <label for="amount">Donation amount ($50 increments):</label>
    <input type="text" id="amount3" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider3"></div>

    </div><!-- End demo -->

    <div class="demo-description">

    <p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value.  The default increment is 1.</p>

    </div><!-- End demo-description -->

    </body>
    </html>