CmSlider

Description

CmSlider is a slider control, built using the Unity UI Toolkit's VisualElement called Slider. It provides advanced configurations, allowing you to handle user input through draggable sliders. It supports horizontal and vertical orientations, as well as additional customization options via modifiers.

Adding CmSlider to Your UI

You can create and add a CmSlider to your UI like this:

CmSlider slider = new CmSlider();
parentContainer.Add(slider);

Or, add it to a CmScrollView:

CmSlider slider = new CmSlider();
CmScrollView scrollView = new CmScrollView();
scrollView.AddContent(slider);

CmSlider Control Built-In Methods

The CmSlider class provides several configurational and behavioral methods:

    // Set the slider direction (Horizontal or Vertical)
    public void SetSliderDirection(SliderDirection direction)

    // set Slider label
    public void SetLabelText(string text)

    // Set the current value of the slider
    public void SetSliderValue(float value)

     // Set the current value of the slider
    public void BindSliderValue(CmObservableData<float> observableSliderValue)

    // Returns UI toolkit Slider
    public override VisualElement GetVisualElement()

Example:

CmSlider slider = new CmSlider();
slider.SetSliderValue(50);
slider.SetSliderDirection(SliderDirection.Horizontal);

Style CmSlider Elements

CmSlider.GetModifiersBuilder() allows you to style the CmSlider through its internal modifiers class.

    public class CmSliderModifiers : ICmControlModifiers
    {
        public CmMainModifiers Main
        {
            get { return new CmMainModifiers(_cmModifiersContainer); }
        }

        public CmDraggerModifiers Dragger
        {
            get { return new CmDraggerModifiers(_cmModifiersContainer); }
        }

        public CmLabelModifiers Label
        {
            get { return new CmLabelModifiers(_cmModifiersContainer); }
        }

        public class CmLabelModifiers : ICmControlModifiers
        {
            public CmLabelModifiers Label(CmModifierText modifier)
        }

        public class CmMainModifiers : ICmControlModifiers
        {
            public CmMainModifiers Background(CmModifierBackground modifier)
        }

        public class CmDraggerModifiers : ICmControlModifiers
        {
            public CmDraggerModifiers SliderParent(CmModifierBackground modifier)
            public CmDraggerModifiers SliderDragHandleborder(CmModifierBackground modifier)
            public CmDraggerModifiers SliderDragHandle(CmModifierBackground modifier)
            public CmDraggerModifiers SliderTracker(CmModifierBackground modifier)
            public CmDraggerModifiers SliderDragContainer(CmModifierBackground modifier)
        }
    }

You can style elements within the slider like this:

// Create slider
CmSlider slider = new CmSlider();
slider.SetSliderDirection(SliderDirection.Horizontal);

// Apply a style
slider.SetStyle(GetTheme().SliderStyle);

// In your theme
public ICmControlModifiers SliderStyle()
{
    var modifiers = CmSlider.GetModifiersBuilder();

    var track = modifiers.Track;
    track.Background(new CmModifierBackground(CmSelector.DefaultState)
        .ColorRGBA(Color.gray)
    );
    track.Height(4.Px());

    var thumb = modifiers.Thumb;
    thumb.Background(new CmModifierBackground(CmSelector.DefaultState)
        .ColorRGBA(Color.white)
    );
    thumb.Size(12.Px());

    return modifiers;
}