Question

I have been doing a jQuery slider for a day or so, and we just have conflicts with other jQuery elements.

So thought bugger it, let’s have a play with Mootools.

The issue is I am crap at Js.

So here is a link to what I have, http://sitehelp.com.au/slider/

Now what I want to do is:

The slider updates amount in the input element. Input box to show $0 on page load.
As the slider slides along the amount in the Input element increases.

Alternatively Would like to be able to TYPE into the input element, and make the slider slide to that point, along the slide rule.

Also need this to be able to sit on page with jQuery stuff, I seem to recall a fix for Mootools and jQuery on page together, but cannot remmeber it.

Lastly, on SUBMIT pass the value user entered .

Any assistance, greatly appreciated.

To See my jQuery Version. >> http://sitehelp.com.au/slider2/

( I didnt author the jQuery version, its just one I have customized via link on Stack )

Answer 1

You could achieve it in this way (fiddle here : http://jsfiddle.net/steweb/qg9M6/ ):

Avoid conflicts with jQuery

Include jQuery, put jQuery.noConflict(); before doing stuff with jQuery..wrap jQuery scripts in this way:

(function($) {
  //jquery stuff
})(jQuery);

and after jQuery scripts include mootools lib and the drag slider moo script. i.e.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    (function($) {
        //jquery stuff
    })(jQuery);
</script>

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
    window.addEvent('domready',function(){
        //mootools stuff
    });
</script>

---

Code of the drag slider

JS

window.addEvent('domready',function(){

    var slider = $('slider'); //grab slider
    var amount = $('amount'); //grab input 'amount'
    var sliderInstance = new Slider(slider, slider.getElement('.knob'), {
        range:[0,3000000], //range of the slider instance
        wheel:true, //try to use mousewheel when u are over the slider
        steps:3000, //number of steps (3.000.000/1.000)
        initialStep:0, //starting from
        onChange: function(value){
            //when it changes, update the amount 
            amount.set('value',value);
        }
    });
    amount.addEvent('blur',function(){ //when u input something and u click outside of the imput
        sliderInstance.set(this.value); //update slider instance
    });

});

Markup

<p>$0 to $3,000,000 ($1000 increments):</p>
<div id="slider" class="slider">
  <div class="knob"></div>
</div>
<label>$<input type="text" id="amount" name="amount" value="" /></label>

CSS

.slider {
  background: #CCC;
  height: 16px;
  width: 200px;
  float:left;
  margin:5px 10px 0px 2px;
}
  .slider .knob {
    background: #000;
    width: 16px;
    height: 16px;
  }

input[type="text"]{
    font-size:14px;
    padding:3px;
}

Hope it helps 😉