Range slider selected interval coloring broken

[Krasimir Ivanov]

Hello,

Sometimes when using the range slider the selected interval is colored the same way as the rest of the interval:

Then only black part should be between 0 and 340. This happens from time to time. My code is:

 <SfSlider @ref="this.slider" @bind-Value="this.Limits" Type=SliderType.Range [email protected][0] [email protected][1] Step="0.1">

                <SliderTicksData Placement="Placement.Before" LargeStep=@(425/5)/>

                <SliderTooltipData IsVisible="true" ShowOn="TooltipShowOn.Hover"/>

            </SfSlider>

This slider is inside a modal and when the modal is opened I refresh the slider.

[Sharon Sanchez Selvaraj]

Hi Ivan, 

Thanks for contacting Syncfusion Support. 

We have validated your issue and were able to replicate it. We have considered this as a bug from our end and the fix for this will be included in our Volume 1,2021 release which is expected to be rolled out by the end of March. 

Please track the below feedback link below to know the status of this issue. 

https://www.syncfusion.com/feedback/22092/slider-range-bars-color-is-not-properly-set 

Meanwhile, please share us the exact version of your application in which you get this issue. 

Please get back to us if you need any further assistance. 

Regards, 

Sharon Sanchez S. 

[Sharon Sanchez Selvaraj]

Hi Ivan, 

 

We regret for the inconvenience.  

  

On further validation on the reported issue, we would like to convey that you have used the bind-Value attribute with variable Limits. 

  

public float[] Limits = { 0, 425 }; 

  

But the same variable has also been used for Min and Max property, this variable will be dynamically updated based on the selected values. 

  

<SfSlider @ref="this.slider" @bind-Value="this.Limits" Type=SliderType.Range [email protected][0] [email protected][1] Step="0.1"> 

<SliderTicksData Placement="Placement.Before" LargeStep=@(425/5) /> 

<SliderTooltipData IsVisible="true" ShowOn="TooltipShowOn.Hover" /> 

</SfSlider> 

  

When using the same variable for the Min and Max value, then values will be changing continuously. For resolving the reported issue, we suggest you to set the Min and Max value in another variable else need to set the value directly. 

  

Min="0" Max="425" 

  

The below code will resolve the reported issue, 

  

<SfSlider @ref="this.slider" @bind-Value="this.Limits" Type=SliderType.Range  Min="0" Max="425"> 

<SliderTicksData Placement="Placement.Before" LargeStep=@(425/5) /> 

<SliderTooltipData IsVisible="true" ShowOn="TooltipShowOn.Hover" /> 

</SfSlider> 

 

 

  

Refer to the sample. 

 

https://www.syncfusion.com/downloads/support/forum/162178/ze/Slider296713459.zip 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S.