Home/ Questions/Q 7821685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T07:43:25+00:00

(first of all, a disclaimer: I’m a JavaScript / MooTools newbie, so it’s very

  • 0

(first of all, a disclaimer: I’m a JavaScript / MooTools newbie, so it’s very likely that the solution may be a trivial miss)

With some help, I was able to put a simple slider to run properly on jsFiddle, using MooTools. It is here -> http://jsfiddle.net/wowenkho/uGcTx/

Now, I want to reproduce it on my own PC. I learn from some threads here that I have to wrap jsFiddle code. In Aptana, I’ve got the code like this:

<html>
    <head>
            <script type="text/javascript" src="mootools_v1_2.js"></script>

            <script type="text/javascript">
                $(function()
                {
                    window.addEvent('domready',function()
                    {
                        var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
                        {
                            onChange : function(step)
                            {
                                document.id("q1_r1").set('value',step);
                                document.id("value").set('html',step);
                            }           
                        });


                        window.onresize = function () {
                            //s.recalculate();
                        };

                    });
                });
        </script>
    </head>
    <body>
        <input name="q1_r1" id="q1_r1" type="hidden">

        <span id="value">0</span>

        <p ><div class="slider" id="slider-1" tabIndex="1">
            <input class="slider-input" id="slider-input-1" />
        </div>
    </body>
</html>

I do know that the MooTools version I’m using isn’t exactly the same (jsFiddle is using 1.2.5, I’m using 1.2.1). I could try to use 1.2.5 here (and I will, meanwhile), but that’s not the purpose, since I have to use 1.2.1. I also do know MooTools is running well, at least theoretically, since I’ve made the “hello world” before and it worked.

How this is at the moment, I only see the span and a text box, instead of the slider.

I guess I’m missing something trivial here.

Thanks all possible help in advance,
Jaff

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are two problems with your implementation the first is simple take it out of the $function wrapper if you look in the console your domready function is not getting called.

                    window.addEvent('domready',function()
                {
                    var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
                    {
                        onChange : function(step)
                        {
                            document.id("q1_r1").set('value',step);
                            document.id("value").set('html',step);
                        }           
                    });


                    window.onresize = function () {
                        //s.recalculate();
                    };

                });

    The second is that you are actually using a plugin for mootools. If you look at your js fiddle it says using mootools more 1.2.5.1. It’s inside the more part that you find the slider class. If you don’t have that then slider is not defined. So make sure when you download the core mootools which is required for all plugins that you also check the more and slider boxes. On the mootools website when you go to 1.2.5 download for core go to the more builder and you can add those.

    • 0