Implement ability to style progress of a range input

[viseztrance]

This adds the ability to style the current progress of a range input, similar to ::-moz-range-progress, :-webkit-slider-runnable-track.

[mikke89]

Very cool, I like the idea! Thanks for making a pull request.

Is it working with decorators too?

I am a bit busy these days, but will take a closer look at it soon.

[viseztrance]

If you mean, you can use decorators to style it, then yes (ninepatch works fine for example). Definitely take your time, I'm in no hurry over it.

[mikke89]

Thanks a lot for the pull request, it's a very nice addition! I like the subtle red you have added to the sample input range, the progress background gives some extra life to the element.

Overall, looks good to me code-wise, a couple smaller comments.

One issue I found is that if you press and drag the left mouse button from the progress area, then the slider doesn't move while dragging anymore. Compare this to the behavior to the right of the slider bar, where it still works as before.

I tested it in the benchmark sample, and didn't notice any significant degradation, maybe 2-3% max, but could be noise. This benchmark includes the extra decoration too, so I'm okay with this.

[viseztrance]

One issue I found is that if you press and drag the left mouse button from the progress area, then the slider doesn't move while dragging anymore. Compare this to the behavior to the right of the slider bar, where it still works as before.

I'm going to look into fixing this. I didn't knew this functionality existed.
Fixed!

[mikke89]

Nice, seems to work well for me now!

One perhaps slight change in behavior is that the progress blocks the :hover of the slidertrack. So users that used slidertrack:hover rules will see some changes here. The fix is rather simple though:

input.range sliderprogress {
	display: none;
}

But perhaps a bit confusing if the user don't know about the sliderprogress. Same thing with :active. Do you have some thoughts around this? It might be acceptable considering the simple fix, but maybe there are some ways we can retain the old behavior if the sliderprogress isn't used.

[viseztrance]

Over the weekend I'll look into reparenting the element to slidertrack. This should handle hover events nicely, and maybe even styling will be easier this way.

It won't work for active however, but I don't think that's a big issue, because the moment you click, we move slidebar under the cursor.

[mikke89]

Good idea, definitely worth investigating. Another option could be to make it zero height if height has not been explicitly set.

One thing I noticed about active is that we only set it on the bar once we start dragging, so not on mouse down directly. That could be improved separately I think, it would make sense to make it active immediately while moving the bar under the mouse. But for now it's fine to ignore the active behavior here as you say.

[viseztrance]

I made some new changes. Seems like just reparenting was sufficient to fix the hover event.

Also had a quick look over the :active behaviour you mentioned when you click the track. It was a trivial one liner fix, so I added that in.

[mikke89]

Thanks for continuing with the improvements!

It's a bit problematic to set the :active pseudo selector directly like this. We have a separate active chain controlled by the context, which is responsible for turning the pseudo selector off again as appropriate. When setting the pseudo class directly, it's not added to the active chain, and thus it won't always be deactivated when letting go of the mouse button. You can see this if you press on the progress element or one of the plus/minus buttons, and then let go. It will stay active. This stuff is a bit finicky.

[viseztrance]

I removed the active "fix". Considering the problem existed before, this PR was not the best place to fix it either way.

[mikke89]

Great, thanks! Looks good to me. And I agree, let's rather do that fix separately.

It would be super helpful if you could add some quick details about these changes to the documentation as well.