Question How to make my own VisualElement? (Slide Toggle & Min Max Slider with visible values)

Hello,

I am learning UI Toolkit for one of my project and I have seen that it is possible to make our own custom visual element. I have not found many answsers on Youtube or other web site and the Unity documentation is not very clear.

I have done this in UI Builder:

​

But I don't know how to make it interactable with the user. It is a little checkbox acting like a toggle.

 

Thank you. I will definitly take a look at this.

I am also trying to make my own MinMaxSlider with visible values.

​

I hope, this will help me to understand how to use custom visual elements.

 

Here is the code for my MinMaxSlider. Everything seems to work fine but I am not very sure of the code and its good practice. If you have any advise, I would be happy to read you.

Code (CSharp):

1. public class MinMaxSlider : VisualElement {
2.  
3.     public new class UxmlFactory : UxmlFactory<MinMaxSlider, UxmlTraits> { }
4.     public new class UxmlTraits : VisualElement.UxmlTraits
5.     {
6.         private UxmlStringAttributeDescription m_Label = new UxmlStringAttributeDescription { name = "label", defaultValue = "Min Max Slider" };
7.         private UxmlFloatAttributeDescription m_MinValue = new UxmlFloatAttributeDescription { name = "min-value", defaultValue = 0 };
8.         private UxmlFloatAttributeDescription m_MaxValue = new UxmlFloatAttributeDescription { name = "max-value", defaultValue = 60 };
9.         private UxmlFloatAttributeDescription m_LowLimit = new UxmlFloatAttributeDescription { name = "low-limit", defaultValue = 0 };
10.         private UxmlFloatAttributeDescription m_MaxLimit = new UxmlFloatAttributeDescription { name = "hight-limit", defaultValue = 100 };
11.  
12.         public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
13.         {
14.             base.Init(ve, bag, cc);
15.  
16.             MinMaxSlider minMaxSlider = ve as MinMaxSlider;
17.  
18.             minMaxSlider.label = m_Label.GetValueFromBag(bag, cc);
19.             minMaxSlider.minValue = m_MinValue.GetValueFromBag(bag, cc);
20.             minMaxSlider.maxValue = m_MaxValue.GetValueFromBag(bag, cc);
21.             minMaxSlider.lowLimit = m_LowLimit.GetValueFromBag(bag, cc);
22.             minMaxSlider.hightLimit = m_MaxLimit.GetValueFromBag(bag, cc);
23.         }
24.     }
25.  
26.     Label labelField;
27.     UnityEngine.UIElements.MinMaxSlider slider;
28.     FloatField minValueField;
29.     FloatField maxValueField;
30.  
31.     public string label { get => labelField.text; set => labelField.text = value; }
32.  
33.     public Vector2 value
34.     {
35.         get => slider.value;
36.  
37.         set => slider.value = value;
38.     }
39.  
40.     public float minValue
41.     {
42.         get => slider.minValue;
43.  
44.         set {
45.             if (value < lowLimit)
46.                 slider.minValue = lowLimit;
47.             else if (value > maxValue)
48.                 slider.minValue = maxValue;
49.             else
50.                 slider.minValue = value;
51.  
52.             minValueField.value = slider.minValue;
53.         }
54.     }
55.  
56.     public float maxValue
57.     {
58.         get => slider.maxValue;
59.        
60.         set {
61.             if (value < minValue)
62.                 slider.maxValue = minValue;
63.             else if (value > hightLimit)
64.                 slider.maxValue = hightLimit;
65.             else
66.                 slider.maxValue = value;
67.  
68.             maxValueField.value = slider.maxValue;
69.         }
70.     }
71.  
72.     public float lowLimit
73.     {
74.         get => slider.lowLimit;
75.        
76.         set {
77.             slider.lowLimit = value < hightLimit ? value : hightLimit;
78.  
79.             if (minValue < slider.lowLimit)
80.                 minValue = slider.lowLimit;
81.  
82.             if (maxValue < slider.lowLimit)
83.                 maxValue = slider.lowLimit;
84.         }
85.     }
86.  
87.     public float hightLimit
88.     {
89.         get => slider.highLimit;
90.        
91.         set {
92.             slider.highLimit = value > lowLimit ? value : lowLimit;
93.  
94.             if (maxValue > slider.highLimit)
95.                 maxValue = slider.highLimit;
96.  
97.             if (minValue > slider.highLimit)
98.                 minValue = slider.highLimit;
99.         }
100.     }
101.  
102.     public MinMaxSlider() : this("Min Max Slider", 0, 40, 0, 100)
103.     {
104.        
105.     }
106.  
107.     public MinMaxSlider(string label, float minValue, float maxValue, float lowLimit, float hightLimit)
108.     {
109.         VisualTreeAsset document = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/PrefabPlacer/UI Toolkit/MinMaxSlider.uxml");
110.         document.CloneTree(this);
111.  
112.         labelField = this.Q<Label>("label");
113.         slider = this.Q<UnityEngine.UIElements.MinMaxSlider>("slider");
114.         minValueField = this.Q<FloatField>("minValue");
115.         maxValueField = this.Q<FloatField>("maxValue");
116.  
117.         slider.RegisterValueChangedCallback((evt) =>
118.         {
119.             minValueField.value = evt.newValue.x;
120.             maxValueField.value = evt.newValue.y;
121.         });
122.  
123.         minValueField.RegisterValueChangedCallback((evt) =>
124.         {
125.             this.minValue = evt.newValue;
126.         });
127.  
128.         maxValueField.RegisterValueChangedCallback((evt) =>
129.         {
130.             this.maxValue = evt.newValue;
131.         });
132.  
133.         this.label = label;
134.         this.minValue = minValue;
135.         this.maxValue = maxValue;
136.         this.lowLimit = lowLimit;
137.         this.hightLimit = hightLimit;
138.     }
139. }