Improvements to user-experience [#2039171]

I installed the slider, and found a bunch of little things I wanted to improve, and did so:

As soon as you let go of a handle, it submits the form. I didn't like that, because what if I wanted to adjust it a little more, or more importantly, what if I want to adjust the 2nd handle too? So I changed it so that when you move a handle, a link appears saying "click here to apply this restriction", and clicking that is what submits the form.
I'm using the slider to display year infomation -- so both handles have a 4-digit year over them. And when they get close together, the numbers collide and one of them jumps out of the way to a place where you can't see it. So I fixed it so that the numbers move with the handle, but not quite as fast as the handle, such that when the two handles are side-by-side, the numbers are not colliding.
After you adjust the sliders and the page reloads, the sliders to continue to appear where they should be, but the displayed values are not the values of where the slider *is*, but rather of where it was before, when it showed the max/min values for the range. So I fixed it so that the numbers displayed when the page reloads are the same ones as you just selected.
Before, the range selected was actually the distance between the two left-edges of the handles, rather than the space between the right-edge of the left handle, and the left-edge of the right handle. This resulted in the handles having to overlap to get tight ranges. So I fixed it so that you never have to (or can) make the handles overlap.
Made the handles a little narrower, to appear less clunky.

Comment	File	Size	Author
#3	2039171-3.patch	3.15 KB	nick_vh
#2	2039171-2.patch	3.66 KB	nick_vh
#1	2039171.patch	3.68 KB	dan3h

Comments

Comment #1

dan3h commented 10 July 2013 at 20:49

Status	File	Size
new	2039171.patch	3.68 KB

See attached patch containing changes to the javascript file, to make the stuff described above happen.

There is also some css, which I put in my screen.css, but could also be packaged in this module:

.ui-slider-horizontal .handle-min {
  margin-left: -0.6em;
}
.ui-slider-horizontal .handle-max {
  margin-left: 0em;
}
.ui-slider .ui-slider-handle {
  width: 0.5em;
}