ARIA Slider, Part 3

Hans Hillen says:

Hi Rick,

You can define a callback function as a parameter, for example: TPG_callback-myFunction. This will cause the ‘myFunction’ function to be called whenever the slider value changes. The callback function will be sent two parameters: the slider’s current value, and the slider’s ID. The callback function can also be an object method: tpg_callback-myObject.myFunction. Alternatively, you can call the slider’s ‘addListener’ method, which allows you to attach multiple callback functions for one slider.

I deliberately did not use the onChange handler for the select boxes, because this may be too disruptive for keyboard users. Instead, the change is applied when the select element’s blur event occurs. I guess this behavior is not always what the user expects, but I’ll probably leave it like this for now.

Yes, a slider which allows multiple values to be selected would be great, and I’m thinking about including this feature in a future version.

Hans Hillen says:

Hi Zafer,

Yes this is possible. You can control the thumbs boundaries through scripting, by calling the slider object’s updateLowerLimit() and updateUpperLimit() methods. This does not change the actual range of the slider, but it limits ow far the thumb can go. For example, if your slider ‘mySlider’ has a range of 0-100, and you call mySlider.updateLowerLimit(20), the thumb will not be able to go lower than 20. The values 0-19 can not be selected, but are still visible.

However, if you want to change the actual range of the slider, you will have to remove the existing slider and create a new one in its place. You can do this by calling the TPG .Control.Slider constructor, and passing it three parameters: 1. a unique ID to use, 2. a reference to the fallback input or select element, and 3. a custom object that contains all configuration parameters.

Regards,
Hans Hillen

Hans Hillen says:

Hi Zafer,

When a slider is created, the slider object is automatically stored in TPG.Control.Slider.instances . You can reference a slider using the ‘get’ method, which takes either the slider’s ID or its index as a parameter. For example

var mySliders = TPG.Control.Slider.instances;
var slider1 = mySliders.get(0); //returns the first slider found on the page
var slider2 = mySliders.get(‘tpgSlider_volume’) //returns the slider with ID ‘tpgSlider_volume’

you can then call the slider’s public methods, for example:

slider1.changeHumanValue(20) // changes the value
slider1.updateLowerLimit(10) // sets the lower limit to 10

I made some important changes to the code today, so make sure you get the latest from . One of the things that has changed is the way the IDs are assigned to the slider objects. Now a slider is given an ID of ‘tpgSlider’ followed by the ID of the fallback input element.

SRAO says:

Hi,
This is a great stuff, I am trying this out, but I am getting an ..log console at the below like…
1:39:25 PM: adding function _handleMaxChange (newValue) {
_thumbMin.updateUpperLimit(newValue – 1);_update();}
1:39:25 PM: adding function _handleMinChange (newValue) {
_thumbMax.updateLowerLimit(newValue + 1);_update();}
what is this?? how can i avoid it??

SRAO says:

Thanks Hans, I tried the latest code from , but this still has the debug code. Am I looking at the correct link?

Hans Hillen says:

Hi SRAO, I updated the code to match your request (please make sure to replace ALL files in the zip when updating).

First of all, to reference a double slider, you must use a different object:

TPG.Control.DoubleSLider.instances

It works the same as the single slider reference object (the ‘get’ method takes either an index number or ID value).

Once you have a reference to a double slider object, you can reference its individual thumbs using the getMinThumb() and getMaxThumb() methods. These objects are exactly the same as regular slider objects, meaning that you can call changeUpperLimit() and changeLowerLimit() on them (note that the names of these methods have changed, they used to be updateLowerlimit, etc.) .

By default, changing these limits will not have much effect in a double slider, because double sliders automatically update each others’ limits (one thumb cannot overlap or pass the other one) whenever a value is changed. So if you were to manually change a limit it would be overridden immediately. Since you want to be able to update the limits yourself, I added a new configuration variable: ‘tpg_bindThumbs’, if you set this to false (e.g. by adding ‘tpg_bindThumbs-false’ to the slider’s classname), the boundaries will NOT be automatically updated, and the thumbs WILL be able to pass each other. You can then manually set the limits to whatever you want.

To change the stepsize, you can use the ‘changeStepSize()’ method. This method can be called either on a double slider object (to change the stepsize for both thumbs) or on an individual thumb object (to set different stepsizes for each thumb). Note that you can only change the stepSize if the fallback input element is a textbox. For selectboxes, the stepsize is always 1.

Here are some code snippets that illustrate the above:
The HTML code: (note that I included ‘tpg_bindThumbs-false’ to allow the limits to be change manually)

JavaScript:

var mySlider = TPG.Control.DoubleSlider.instances.get('priceRange'); // get double slider reference
var mySlider.changeStepSize(5) //change stepsize from 50 to 5 for both thumbs
var minThumb = mySlider.getMinthumb();
minThumb.changeStepSize(10); // change stepsize to 10 only for the left thumb
minThumb.changeUpperLimit(100) // now the left thumb can't go further than 100.

I currently haven’t got the API details ready. A good approach might be to use Firebug https://www.getfirebug.com), which is a Firefox extension that has a helpful command panel. You can use this panel to quickly try out code snippets like the ones above, but you can also use it to see which public methods each object has using the ‘console.dir’ command:

var mySlider = TPG.Control.DoubleSlider.instances.get('priceRange');
console.dir(mySlider); //lists all available methods and properties for the double slider object
console.dir(mySlider.getMaxThumb()); //lists all public methods and properties for the right thumb object

One day I’ll have proper documentation for this component, but not now.

Regards,

Hans Hillen

Dewang says:

Hi,

I am trying to use the callback functionality but not having any joy.

The callback function is defined in a separate js file. (I tried adding it to slider.js but the same result). I have added some debug in the addListener() method and when it does
callback = window[listener];
callback comes back as undefined.

Any ideas as to what I might be doing wrong?

Many thanks,
Dewang