Sometimes they come back ... again

Most recently, a post about pleasant TrackBar sliders was published on Habré by the user bur . I liked them because of their simplicity and the possibility of using them in conjunction with jQuery. A little later, there was also a post about a slider, which defined the range of time, but was blamed for its heavy weight and “weight”. Then I had the idea to create on the basis of TrackBar sliders to select an arbitrary range of time. Invented - done. And now I am presenting my achievements of habro-publicity.

So, it was:

It became:


I took the 3rd version of TrackBar adapted for jQuery as a basis and upgraded it only, if you wish, you can try to transfer add-ons to the original version.
Immediately give links:
The third version of TrackBar and its discussion
The fourth version of TrackBar and its discussion
Demonstration of the updated TrackBar
')

What was bad

Initially, sliders were calculated only to determine one or two exceptionally integers. Hence all of its implementation flaws:

1. Work with integers only
2. No serif
3. Inability to assign your text instead of numbers

Fixing all these flaws took about 3 pm.

What's new

In order to create a slider of my dream, I had to seriously refine the initial implementation and introduce new variables and events. So, what's new and tasty are the sliders now:

1. Show two types of serifs: small and large
2. Make arbitrary signatures:
   • over large serifs
   • on the sliders
   • on the left and right border
3. Accurately position sliders on values ​​as they are dragged.
4. Independently create your own hidden inputs for forms (without the need to write your onMove)
5. Redefine from the outside on the fly:
   • Slider positions and variable values
   • Left and right limits
   • Notches
6. Show the range of values ​​for the set limits
7. Hide sliders if their value is out of range
8. Flexibly configure all of the above.
9. Compatibility with the fourth version

Some of the innovations can be seen here:

Archive with all files

Full list of new settings with a brief description:

Additional parameters (parameter: default value):

showSmallTicks: true - a flag that allows or prohibits the display of small serifs

showBigTicks: true - a flag that allows or prohibits the display of large serifs to which you can assign text

showBigTicksText: true - a flag that allows or prohibits the display of text next to large serifs

tickRoundUp: = roundUp = 0 is a variable that is responsible for the number of serifs, namely the number of values ​​that will be located between 2 adjacent serifs; the default value is 0 and serifs are not shown.

tickDivider: 5 is a variable that is responsible for the number of small serifs between large ones (one more than this value)

allowOverrideBorders: false - a flag that allows or forbids the range to go beyond the set boundaries while maintaining the interval

precisePosition: false - a flag that allows or forbids precise positioning of the sliders

leftInputName: id + 'Left' - a variable that is used to create hidden input for the left slider (if the dual flag is set) or for the entire slider (if dual is not set)

rightInputName: id + 'Right' - a variable that is used to create a hidden input for the right slider (if the dual flag is set)

createHiddenInputs: false - a flag that determines whether to create and manipulate hidden inputs or not

Additional events:

onLeftLimitTextSet, onRightLimitTextSet - setting text on the left and right borders of the slider

onLeftSliderTextSet, onRightSliderTextSet - setting text on the left and right slider

onBigTickText - setting the text on large serifs, the value is passed, on which there is a serif

Additional functions:

updateLeftValue (v4), updateRightValue (v4) - functions for setting the left and right values ​​of the sliders, in the third version they were not, but they appeared in the 4th, I also decided to add them here

SetPositionWithNoMove - setting the position of the slider on the values ​​that have changed from the outside without triggering the onMove event (I had to enter the updateLeftValue, updateRightValue functions)

SetPosition - the same, only with the onMove () call

SetRuler - override serifs

ResetLimits - redefinition of boundary values

If in the 4th version, working with the slider was limited only to calling updateLeftValue and updateRightValue, then the principle of working with the updated TrackBar is as follows:

1. First, we directly set the necessary values, for example
   var scaleObj = $.trackbar.getObject("scale");
scaleObj.leftValue = 10;
scaleObj.rightValue = 20;
scaleObj.rightLimit = 100;
2. Then we call one or more functions of applying values, for example scaleObj.SetPosition();
scaleObj.ResetLimits();
   

To demonstrate all the possibilities, we took the original demo and silently embellished (added parameters are highlighted in blue), also at number 7 I added an example of organizing a range of arbitrary time based on two sliders: the upper one determines the scale of the range, the lower one sets it. In it, all the improvements are used to the fullest, the most obvious example of use.

The most interesting thing in the refinement of the original sliders was the addition of serifs to them. Their implementation could be different, but I stopped at the next approach.

1. First, the main div is organized in which the scale will be located and it gets down under the line with sliders
2. Then a set with different id is generated, by which it is determined which serif to draw
3. So that the serifs do not merge, like Siamese twins, they are inserted between them, and the width is calculated for each slider separately.

By a similar principle, signatures under the scale are also constructed.
This approach allows you to simply and quickly create serifs and control them through css, but it has one major drawback: not all browsers use all the fractional signs, discarding or rounding them. Therefore, with a large number of serifs (more than 40), it can be clearly seen how the serifs on the right do not completely cover the trackbar (see Example 1) and there is a discrepancy between the location of the serif and the actual value. On small values ​​it is completely unnoticeable.

Cross-browser compatibility and known shortcomings

Initially, all development was carried out on Firefox second version, which helped to quickly and easily create a fairly good layout for serifs and further optimize it for other browsers. So, let's start analyzing the work of the sliders in various browsers.

Firefox v2.0.0.13
No problems noticed, everything works as intended. The only problem that can sometimes arise is the incorrect matching of the serifs and the values ​​on the right side of the slider with a large number of serifs, but this was written above.


IE v7
Oddly enough, but everything works fine, about the same as in Firefox, only there is more discrepancy on the right side of the slider. Plus, the serifs themselves are drawn a couple of pixels higher.


IE v6 and v8b1
In appearance, everything is like in IE 7, only there is no transparency of the central part. Not very critical, but unpleasant, especially in IE 8. Perhaps, the css transparency value is simply incorrectly determined and it can theoretically be cured in the future somehow. In IE 6 in the 7th example, a bit of the text went beyond the boundaries and moved to a new line.


Safari 3.1.1
Everything is also almost without problems, but there is already a stronger shortage of serifs to the end of the slider. This is noticeable in the first example, somewhere around 10% of the slider is not covered by them, so for Safari it is not recommended to do more than 50 serifs.


Up to this point, the testing process was a pleasure, but the feeling that everything did not always happen the way we wanted and the rake had to come out on the sly slowly creeping in. And they got out in ...

Opera 9.27
I do not even know where to start. In principle, if you turn off serifs, then everything is fine, not counting the artifacts when rendering the slider movement: there are unpleasant yellow marks in place of the slider's signatures, moreover, they do not always disappear with fast dragging and the occurrence of several values ​​on the strip. With serifs in the Opera, it is quite a disaster, since the principle of their creation is based on the use of fractional widths. Experiments have shown that the opera recognizes only integer percentages. And she does not care that 0.8% of 500 pixels is as much as 4! pixel (as in the first example). Well, if it were to round it up, no, the fractional part is simply discarded and bare 0% remains. To persuade her, as I understand it, is meaningless, so we observe all the delights of this approach to non-interest percentages in 1 and 2 examples. The rest managed to avoid such a fate, because there the widths were about whole, and cutting off the hundredths of a percent of the weather did not play, as in Example No. 7, where the values ​​are 1.02% and 6.06%, and they were not specifically selected, I think this intrigues ufo g). About the fact that it still slows down writing noticeably (the dependence is the following: the more serif sliders, the more slows it is).


Other browsers
In other browsers, I did not check: there was no time, and I don’t feel like setting it up just for the sake of testing.

Whats in the future

Honestly - I don’t know, I don’t have any clear predisposition Guess what will happen, I do not want, time will tell.


UPD: Many people say that it slows down (especially in Opera) and because of this it is not quite usable. It is not the javascript code itself that is slowing down, but the browser render about a large number of serifs (moreover, from all the sliders), if you run sample number 7 separately, it becomes much quicker and more pleasant. But this does not remove other problems over which we will work.