
Creates a slider with two elements: a knob and a container.
var mySlider = new Slider(element, knob[, options]);
Fires when the Slider's value changes.
onChange(step)
Fire when you're done dragging.
onComplete(step)
Fires when the user scrolls or when the container element is clicked. This Event can be overridden to alter the default tick behavior.
onTick(pos)
var mySlider = new Slider('myElement', 'myKnob', { range: [-50, 50], wheel: true, snap: true, onTick: function(pos){ this.element.setStyle('border-color', '#f00'); this.knob.setStyle(this.property, pos); }, onComplete: function(){ this.element.tween('border').start('#000'); } });
If snap is enabled, the width of the bar in which the slider resides must fit an equation for the steps to line up just right at it's end value. The equation is:
(Math.ceil(barWidth/numSteps - knobWidth/numSteps) * numSteps) + knobWidth
For instance, if you had a bar that is 300px wide and a knob that is 15px wide, and have snap enabled and 10 steps specified, then the bar's width divided by the number of steps (300 / 10 = 30) minus room for the knob (15 / 10 = 1.5) gives you the value of each step (28.5). Slider must round this value, and it rounds up (29). Take this and multiply times the number of steps and you get 290, but there must also be room for the knob, which adds 15, yielding 305. The result is that our knob can't be dragged to the 10th position because there isn't room for it; so it stops at the 9th. This takes a little tweaking in your css. Just add a few pixels until you can drag it all the way (or change the knob width).
The slider will move to the passed position.
mySlider.set(step);
var mySlider = new Slider('myElement', 'myKnob'); mySlider.set(0); var myPeriodical = (function(){ if (this.step == this.options.steps) $clear(myPeriodical); this.set(this.step++); }).periodical(1000, mySlider);
Attaches the mouse listeners to the Slider making the Slider draggable
mySlider.attach();
var mySlider = new Slider('myElement', 'myKnob'); mySlider.detach(); myElement.addEvent('click', function(){ mySlider.attach(); alert('Slider enabled!'); });
Detaches the mouse listeners from the Slider so its value can't be changed any longer
mySlider.detach();
var mySlider = new Slider('myElement', 'myKnob'); myElement.addEvent('click', function(){ mySlider.detach(); alert('Slider disabled!'); });
Dynamically sets the range for the slider.
mySlider.setRange(range);
range
option array.var mySlider = new Slider('myElement', 'myKnob',{ range: [100, 1000] }); mySlider.setRange([500, 5000]);
Cause the slider to recalculate the allotted drag area for itself (useful if resizing slider).
mySlider.autosize();
var mySlider = new Slider('myElement', 'myKnob'); window.addEvent('resize', function(){ mySlider.autosize(); });
© Linux.ria.ua, 2008-2024 |