Customizing the Range Slider Track with Color Segments

[Stephen Robinson]

hi,

I have copied the code from https://blazor.syncfusion.com/documentation/range-slider/how-to/customize-the-bar for section "Customizing the Range Slider Track with Color Segment"  but no matter what I do I dont see any color on the track?  

Thanks

Steve

@using Syncfusion.Blazor.Inputs

<SfSlider ID="sliderTracks" TValue="int[]" Value=@RangeValue Type="SliderType.Range" Width="400px">
    <SliderTicks Placement="Placement.Both" ShowSmallTicks="true" LargeStep="20" SmallStep="5"></SliderTicks>
    <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" ShowOn="TooltipShowOn.Always"></SliderTooltip>
    <SliderColorRanges>
        <ColorRange Start="0" End="50" Color="green"></ColorRange>
        <ColorRange Start="50" End="100" Color="red"></ColorRange>
    </SliderColorRanges>
</SfSlider>

@code {
    public int[] RangeValue = { 30, 70 };
}

<style>
    #sliderTracks.e-slider .e-range, #sliderTracks.e-slider .e-handle {
        background-color: #FF9800;
    }

    #sliderTracks.e-slider .e-handle {
        border-radius: 50%;
        border: 0;
    }

</style>

[LeoLavanya Dhanaraj]

Hi Stephen,

  

Greetings from Syncfusion support.

Based on the information you provided, we understand that you are experiencing an issue with the Slider color range. To validate this issue, we have prepared a mentioned documentation sample with the latest version, which has been properly rendered with the color customization. For your reference, we have included the sample.

Sample : https://blazorplayground.syncfusion.com/hZhSZKZQLRZGHBHH

@using Syncfusion.Blazor.Inputs

SfSlider ID="sliderTracks" TValue="int[]" Value="@RangeValue" Type="SliderType.Range" Width="400px">

    <SliderTicks Placement="Syncfusion.Blazor.Inputs.Placement.Both" ShowSmallTicks="true" LargeStep="20" SmallStep="5"></SliderTicks>

    <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" ShowOn="TooltipShowOn.Always"></SliderTooltip>

    <SliderColorRanges>

        <ColorRange Start="0" End="50" Color="green"></ColorRange>

        <ColorRange Start="50" End="100" Color="red"></ColorRange>

    </SliderColorRanges>

</SfSlider>

Output screenshot:

Additionally, we suspected an issue occur due to the usage of Placement property. Therefore, ensure that you properly import the corresponding component namespace along with the property value(like Placement="Syncfusion.Blazor.Inputs.Placement.Both"). In your application, if you are using different components and a common property(like Placement), it may lead to ambiguous errors like the one below. If you are still experiencing any issues, we recommend calling the RepositionAsync method inside the Created event, as the component may not be refreshed.

Refer the above shared sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj