JS-TrackBar, the fourth version of the runners

Not so long ago this work was published on Habré: “Once again about the trackbar” , which describes a simple script for creating such sliders:


Thanks to user feedback, the capabilities of the first version of the script have been significantly expanded. It grew to v3.0, while updating the article describing the new functionality. However, some changes were postponed “for later”, since demanded more serious intervention in the code. And the long-awaited “later” has arrived and the fourth version of JS-TrackBar has been released.

TrackBar Archive v4.0 - 31Kb .
')

About new

The main demo file will not please you with anything special, since All new features are made in a special demo .

Let's see what is implemented in the new version.

Compatibility with the previous version

Though a trifle, but the main demo contains the same js-code as the previous third version. This means that if there are trackbars on your page that work on earlier versions of the script, you can calmly download and install the fourth, nothing will change.

Updated Initialization

In previous versions, the initialization script needed to be placed in the necessary part of the HTML code and it took only one argument:

trackbar.getObject('one').init({
/* */
});

This method is often inconvenient, because requires a change of project templates. To correct this deficiency, in the fourth version the capabilities of the .init() method are expanded and now it can take the identifier of the HTML element as the second argument:

trackbar.getObject('one').init(
{
/* */
},
"elementId"
);

Correspondingly, now the initialization code can be called anywhere, for example, in a js file, without changing the HTML code.

Trackbar sync

It immediately catches the eye on a special demo . Now the trackbars can be linked together directly in the onMove callback function, using two new methods:

* updateLeftValue - takes as an argument the value for the left slider, which we would like to install, and changes the state of the trackbar according to it.
* updateRightValue - similar to the previous one, but for the right slider.

Consider, for example, the code for initializing the first slider in a special demo:

trackbar.getObject('one').init(
{
onMove : function() {
trackbar.getObject('two').updateLeftValue(this.leftValue);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
},
"oneId"
);

This code creates a trackbar with the identifier 'one', and the onMove function contains a code snippet meaning: “for the trackbar with id = 'two', set the value of the left slider to the current trackbar.” For symmetry, similar binding is implemented in the second trackbar:

trackbar.getObject('two').init(
{
onMove : function() {
trackbar.getObject('one').updateLeftValue(this.leftValue);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
},
"twoId"
);

The considered example describes a simple communication option, which can be any, at your discretion. For example, such as shown in two other connected trackbars on the new demo . You can apply arbitrary formulas of motion in a callback function, making the dependence non-linear or between more than 2 trackbars. Everything will depend on the needs of your project and the imagination of the interface designer ;-)

About plans

The development of the project JS-TrackBar, most likely will not stop there. In the new version it is planned:
* the emergence of vertically oriented sliders;
* detailed documentation for rus and eng;
* features that you write about in the comments :-)

About jQuery

The archive still includes a version of the script compatible with the jQuery library. However, it did not achieve backward compatibility, so be careful when using it. Because The author of the script did not use jQuery in his practice and made changes to this version of the script “as it should,” help in bringing it to mind is welcome!

Crosspost JS-TrackBar, the fourth version of the runners c webew.ru