feat: Add selectionBarGradient option to customize the selection bar #473
Conversation
Current coverage is 100% (diff: 100%)@@ master #473 diff @@
====================================
Files 1 1
Lines 921 929 +8
Methods 0 0
Messages 0 0
Branches 0 0
====================================
+ Hits 921 929 +8
Misses 0 0
Partials 0 0
|
|
Why not just doing it via CSS? |
|
It's not possible with the range slider. Or I don't see how without changing the whole DOM. Btw, it seems like a test must be written to hit 100% of code coverage ? |
| @@ -1268,6 +1269,20 @@ | |||
| this.scope.barStyle = { | |||
| backgroundColor: color | |||
| }; | |||
| } else if (this.options.selectionBarGradient) { | |||
| var offset = this.options.showSelectionBarFromValue !== null ? this.valueToPosition(this.options.showSelectionBarFromValue) : 0, | |||
| reversed = offset - position > 0 ^ isSelectionBarFromRight, | |||
There was a problem hiding this comment.
It's a XOR. It means either offset - position > 0 or isSelectionBarFromRight is true, but not both.
|
Ok I understand now. Thanks for this pretty complete pull request. Indeed, you need to add tests to cover your changes. You can start from an existing one related to the selection bar. ;) |
|
I'll write some test within the day and update my PR. Can I add another commit or should I |
|
Adding another commit is OK ;) |
| } else if (this.options.selectionBarGradient) { | ||
| var offset = this.options.showSelectionBarFromValue !== null ? this.valueToPosition(this.options.showSelectionBarFromValue) : 0, | ||
| reversed = offset - position > 0 ^ isSelectionBarFromRight, | ||
| direction = this.options.vertical ? 'top' : (reversed ? 'left' : 'right'); |
There was a problem hiding this comment.
the vertical + reversed case is not handled I think. Look this demo: http://jsfiddle.net/nLk7p00v/
There was a problem hiding this comment.
Indeed, I did not see pay attention to that option showSelectionBarEnd. It's fixed by now
There was a problem hiding this comment.
I'm on the phone so I might be wrong but the vertical example in the fiddle still seems broken?
|
The vertical reversed example is still broken: There is a white part on top... |
|
I made a mistake in the fiddle. I was not pointing to the right branch, please try with |
|
OK you are right. I think it is OK to merge it, I'll just need you to rebase on top of master to resolve the current conflicts (just the dist files). For later, I just point out that the |
Add selectionBarGradient option which create a linear gradient for the selection bar. The option accepts an object that contains `from` and `to` properties which are colors describing the gradient
Masadow
force-pushed
the
gradient-selection-bar
branch
from
9553442 to
46cca0a
Compare
|
That's fine for conflicts, I rebased on master already. I agree about showSelectionBarFromValue, I partially handled it but I did not calculate the length of the background gradient. I thought I would not try to handle it since there are multiple design decisions to go from |
|
Indeed, I don't even know how I would handle it, so that's fine for now. |
|
Thanks for your contribution! 👍 |
|
Released via 5.9.0 |
Add selectionBarGradient option which create a linear gradient for the selection bar. The option
accepts an object that contains
fromandtoproperties which are colors describing the gradientHere's a fiddle demonstrating the feature: http://jsfiddle.net/masadow/cqk61f0a/
Additional note: There's room for improvement, for example, the ticks are not affected by the gradient. I think it's another feature but if someone feels like it's a good idea, feel free to give it a go.