Control, TrackBar but with two sliders
I needed such a “thing” as TrackBar with only two sliders, I did not find a ready-made solution on jQuery, I decided to write on my own, though not on jQuery but on pure JS. It seems that this did not become worse. “Stuck” this was needed to select numerical values in the forms of information kiosk .
As you can see, the device does not have a keyboard, and in general the touchscreen is not a very convenient thing, so it was necessary to make a very convenient “thing”, so that pressing to any place, and not just on the sliders, was perceived as a desire to drag the sliders. In addition, during the testing process, it turned out that users still strive to push outside the controller when the slider is in the extreme position. I had to dorobotat, make the gaps (Margins) along the edges, available for pressing but not for moving the slider, something like this:
As you understand, the “thing” can be used not only in information kiosks, but also in any other places where you need to specify the values from and to.
You can set the minimum distance for which the sliders are suitable, the number to which values will be rounded (needed for larger numbers, for example prices), to allow or not to allow the sliders to move to positions that do not lead to a change in values.
The script itself is here .
')
An example of use can be found here or downloaded from here .
As you can see, the device does not have a keyboard, and in general the touchscreen is not a very convenient thing, so it was necessary to make a very convenient “thing”, so that pressing to any place, and not just on the sliders, was perceived as a desire to drag the sliders. In addition, during the testing process, it turned out that users still strive to push outside the controller when the slider is in the extreme position. I had to dorobotat, make the gaps (Margins) along the edges, available for pressing but not for moving the slider, something like this:
As you understand, the “thing” can be used not only in information kiosks, but also in any other places where you need to specify the values from and to.
You can set the minimum distance for which the sliders are suitable, the number to which values will be rounded (needed for larger numbers, for example prices), to allow or not to allow the sliders to move to positions that do not lead to a change in values.
The script itself is here .
')
An example of use can be found here or downloaded from here .
Source: https://habr.com/ru/post/25173/
All Articles