fix(module:slider): fix slider style + reverse marks if reversed slider

[KeelanS]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[X] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Currently the marks and steps of sliders don't get updated when the slider get reversed. When you reverse a slider with marks, the '0' mark will be under value 100 and the '100' mark will be under value 0. The same thing happens for steps, when you have slider value 50 the '0' step doesn't show as 'active', while the '100' step does.

Issue Number: N/A

What is the new behavior?

Now the marks get built while taking the reversed state of the slider into account. The marks also stay under the right value.

The main issue I wanted to solve here is the styling of the steps. But while testing I saw that the marks didn't do what I was expecting either, so I added the functionality that they stay under the right value. If you think this isn't what the marks should do, please tell me so that I can remove it from this PR.

Does this PR introduce a breaking change?

[ ] Yes
[X] No

Other information

[zorro-bot]

This preview will be available after the AzureCI is passed.

[codecov]

Codecov Report

Merging #6006 (da9ee3b) into master (50f0744) will decrease coverage by 0.05%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #6006      +/-   ##
==========================================
- Coverage   89.95%   89.90%   -0.06%     
==========================================
  Files         465      465              
  Lines       14044    14063      +19     
  Branches     2307     2313       +6     
==========================================
+ Hits        12633    12643      +10     
- Misses        863      871       +8     
- Partials      548      549       +1     

Impacted Files	Coverage Δ
components/slider/slider.component.ts	91.39% <ø> (ø)
components/slider/marks.component.ts	89.47% <100.00%> (+0.28%)	⬆️
components/slider/step.component.ts	90.00% <100.00%> (+2.00%)	⬆️
components/table/src/table-style.service.ts	94.82% <0.00%> (-1.73%)	⬇️
components/tabs/tab-nav-bar.component.ts	80.91% <0.00%> (-1.42%)	⬇️
components/tabs/tabset.component.ts	86.20% <0.00%> (ø)
components/typography/typography.component.ts	97.82% <0.00%> (+0.03%)	⬆️
components/select/select.component.ts	87.70% <0.00%> (+0.16%)	⬆️
components/select/select-top-control.component.ts	89.28% <0.00%> (+0.39%)	⬆️
components/code-editor/code-editor.component.ts	14.78% <0.00%> (+1.05%)	⬆️
... and 2 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 50f0744...da9ee3b. Read the comment docs.

[wzhudev]

LGTM. Better to add some tests. 😄

[KeelanS]

@wendellhu95 I added some tests, can you review this again? Thanks!

[DepickereSven]

LGTM and there are even tests now.

[DepickereSven]

@wendellhu95 or @hsuanxyz Is it possible to review this PR again?

[hsuanxyz]

LGTM, @wendellhu95

[yangjunhan]

LGTM~