Question Default Runtime Theme styling Slider without styling ScrollView Slider

How do I create a USS file that is added to the Default Runtime Theme for styling only sliders that are standalone and not Sliders that are inside other VisualElements from unity such as the slider inside the ScrollView,

since a Page Slider is logically totally different than say a percentage slider, but both sliders are in fact the same thing.

How can you style Sliders without affecting the ScrollView slider?

 

I found the answer:

Work Around:
It is not possible to target stand alone sliders. its all or nothing.

Therefore in the DefaultRuntimeTheme.TSS file add a USS file at the top of the list to first style "ALL" Sliders.
Now the ScrollView slider will be totally wrong but all other sliders will look how you want them to.

Now add a second USS file to the DefaultRuntimeTheme.TSS that's below the Slider style USS in the list.
Now you can override slider styling for sliders that are inside other VisualElements. aka the ScrollView slider can be targeted specifically.

USS Example:

I used the word Default to mean its a style file for the runtime theme.

The DefaultSlider.uss

Code (csharp):

1. /* DefaultSlider.uss */
2.  
3. /*
4.  * This file contains the default styling for sliders in the project.
5.  * It is important that this file is added to the DefaultRuntimeTheme list before the DefaultScrollView.uss file to ensure that
6.  * the custom ScrollView styles can correctly overwrite the default slider styles.
7.  */
8.  
9. /* Target the dragger of a base slider (both horizontal and vertical). */
10. .unity-slider .unity-base-slider__dragger {
11.     background-color: rgb(225, 225, 225);
12.     border-radius: 50%;
13.     height: 25px;
14.     width: 25px;
15.     border-width: 0px;
16. }
17.  
18. /* Target the dragger's hover state of a base slider (both horizontal and vertical). */
19. .unity-slider .unity-base-slider__dragger:hover {
20.     background-color: rgb(255, 255, 255);
21. }
22.  
23. /* Target the tracker of a base slider (both horizontal and vertical). */
24. .unity-slider .unity-base-slider__tracker {
25.     background-color: rgb(100, 100, 100);
26.     border-radius: 2px;
27.     border-width: 0px;
28. }

The DefaultScrollView.uss

Code (CSharp):

1. /* DefaultScrollView.uss */
2.  
3. /*
4. * This file contains the custom styling for ScrollView sliders, including both horizontal and vertical orientations.
5. * It is important that this file is added to the DefaultRuntimeTheme list after the DefaultSlider.uss file to ensure that
6. * the custom ScrollView styles overwrite the default slider styles correctly.
7. */
8.  
9. /* Set the background of the drag-container for both horizontal and vertical ScrollView */
10. .unity-scroll-view .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container {
11.     background-color: #3E3E3E;
12. }
13.  
14. /* Target internal Slider's tracker of a ScrollView (both horizontal and vertical) */
15. .unity-scroll-view .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container .unity-base-slider__tracker {
16.     background-color: #2E2E2E;
17.     border-color: #3C3C3C;
18.     border-width: 1px;
19.     border-radius: 5px;
20. }
21.  
22. /* Target internal Slider's dragger of a ScrollView (both horizontal and vertical) */
23. .unity-scroll-view .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container .unity-base-slider__dragger {
24.     background-color: #4C4C4C;
25.     border-color: #3C3C3C;
26.     border-width: 1px;
27.     border-radius: 5px;
28. }
29.  
30. /* Adjust margin-left of dragger for vertical Scroller */
31. .unity-scroll-view .unity-scroller--vertical .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container .unity-base-slider__dragger {
32.     margin-left: -4px;
33. }
34.  
35. /* Adjust width of horizontal Scroller */
36. .unity-scroll-view .unity-scroller--horizontal {
37.     width: 90%;
38. }
39.  
40. /* Adjust margin-top of dragger for horizontal Scroller */
41. .unity-scroll-view .unity-scroller--horizontal .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container .unity-base-slider__dragger {
42.     margin-top: -4px;
43. }
44.  
45. /* Target internal Slider's dragger hover state of a ScrollView (both horizontal and vertical) */
46. .unity-scroll-view .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container .unity-base-slider__dragger:hover {
47.     background-color: #5A5A5A;
48. }
49.  
50. /* Target internal Slider's dragger active state of a ScrollView (both horizontal and vertical) */
51. .unity-scroll-view .unity-scroller__slider .unity-slider__input .unity-base-slider__drag-container .unity-base-slider__dragger:active {
52.     background-color: #6A6A6A;
53. }
54.  
55. /* Target Scroller's low-button and high-button (both horizontal and vertical) */
56. .unity-scroll-view .unity-scroller .unity-scroller__low-button,
57. .unity-scroll-view .unity-scroller .unity-scroller__high-button {
58.     background-color: #4C4C4C;
59.     border-color: #3C3C3C;
60.     border-width: 1px;
61.     border-radius: 5px;
62.     -unity-background-image-tint-color: #FFFFFF;
63. }
64.  
65. /* Target Scroller's low-button and high-button hover state (both horizontal and vertical) */
66. .unity-scroll-view .unity-scroller .unity-scroller__low-button:hover,
67. .unity-scroll-view .unity-scroller .unity-scroller__high-button:hover {
68.     background-color: #4E4E4E;
69. }
70.  
71. /* Target Scroller's low-button and high-button active state (both horizontal and vertical) */
72. .unity-scroll-view .unity-scroller .unity-scroller__low-button:active,
73. .unity-scroll-view .unity-scroller .unity-scroller__high-button:active {
74.     background-color: #5E5E5E;
75. }