When styling multiple sliders with class selectors, only the last selector works

Describe the bug When there are multiple styles for sliders defined using class selectors, only the last selector is valid and works.

To Reproduce

1. Add 2 sliders with different classes to a control.
2. Create two styles for each slider.class (they can have the same Minimum and Maximum values).
3. Only the slider with class that is defined last in the selectors will work.

OR use the following code:

<Window.Styles>
    <Style Selector="Slider.percentSlider">
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Maximum" Value="100"/>
    </Style>
    <Style Selector="Slider.colorSlider">
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Maximum" Value="100"/>
    </Style>

</Window.Styles>

<Design.DataContext>
    <vm:MainWindowViewModel/>
</Design.DataContext>

<StackPanel>
    <Slider Classes="colorSlider"/>
    <Slider Classes="percentSlider"/>
</StackPanel>

Expected behavior Both sliders should work correctly.

Screenshots The second slider cannot be moved

Desktop (please complete the following information):

• OS: Windows 10
• Version 10.14

[maxkatz6]

@rabbitism correct, expected behavior would be to throw an exception. And it is done with that PR https://github.com/AvaloniaUI/Avalonia/pull/8600

[T-0pel]

Thanks for the detailed explanation and discussion. I agree that throwing an exception would be best since this is not supported. The use case was indeed to apply the same properties to a large number of controls, so I will try using data templates to achieve that.

One more weird thing that I do not understand - the styling of data properties seems to work correctly when I set the Maximum to a Binding. That is how it originally was in the code I have inherited. Do you know why that works if it is not supported?

<Window.Styles>
    <Style Selector="Slider.percentSlider">
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Maximum" Value="{Binding Percent}"/>
    </Style>
    <Style Selector="Slider.colorSlider">
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Maximum" Value="{Binding Percent2}"/>
    </Style>
</Window.Styles>

<Design.DataContext>
    <vm:MainWindowViewModel/>
</Design.DataContext>

<StackPanel>
    <TextBox Text="{Binding Slider1}"></TextBox>
    <Slider Classes="colorSlider" Value="{Binding Slider1}"/>
    <TextBox Text="{Binding Slider2}"></TextBox>
    <Slider Classes="percentSlider" Value="{Binding Slider2}"/>
</StackPanel>

public class MainWindowViewModel : ViewModelBase
{
    private int _slider1;
    private int _slider2;

    public int Percent => 100;
    public int Percent2 => 1000;

    public int Slider1
    {
        get => _slider1;
        set => this.RaiseAndSetIfChanged(ref _slider1, value);
    }

    public int Slider2
    {
        get => _slider2;
        set => this.RaiseAndSetIfChanged(ref _slider2, value);
    }
}