Hi,
How can I have the following output in the range slider component?
thank you
Hi Sarah,
Greetings from Syncfusion support.
You can render the Slider component by setting the Min, Max, Value, and Step API properties. Also, to render the exact same Slider shown in the screenshot, set the ShowSmallTicks property as false and set the LargeStep value. Refer to the below code snippet.
|
<SfSlider Min="1" Max="17" Value="5" Step="1"> <SliderTicks Placement="Placement.Before" ShowSmallTicks="false" LargeStep="1" ></SliderTicks> </SfSlider> |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SliderSample1558640681
Also, to know more about Slider component check the below links.
Documentation: https://blazor.syncfusion.com/documentation/range-slider/getting-started/
Demos: https://blazor.syncfusion.com/demos/range-slider/default?theme=bootstrap4
API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Indhumathy L
Hi,
in Program.cs I have:
builder.Services.AddSyncfusionBlazor(options => { options.EnableRtl = true; options.IgnoreScriptIsolation = true; });
in Index.razor :
<SfSlider Min="1" Max="17" Value="5" Step="1">
<SliderTicks Placement="Placement.Before" ShowSmallTicks="false" LargeStep="1" ></SliderTicks>
</SfSlider>
Unfortunately, the output is not displayed correctly. I changed the source as below, but unfortunately the problem was not solved.
<SfSlider Min="1" Max="17" Value="5" Step="1" EnableRtl="false">
<SliderTicks Placement="Placement.Before" ShowSmallTicks="false" LargeStep="1"></SliderTicks>
</SfSlider>
Hi Sarah,
We have validated your reported query with the shared code snippets. We understand that you want to render the Slider component in a Right-to-Left manner. To achieve this, you can directly set the EnableRtl property as true in the Slider component as shown in the below code snippet.
|
<SfSlider Min="1" Max="17" Value="5" Step="1" EnableRtl="true"> <SliderTicks Placement="Placement.Before" ShowSmallTicks="false" LargeStep="1"></SliderTicks> </SfSlider> |
Otherwise, you can enable this property in the Program.cs file as in the shared code.
|
builder.Services.AddSyncfusionBlazor(options => { options.EnableRtl = true; options.IgnoreScriptIsolation = true; }); |
Both ways work properly at our end. For your reference, we have attached the sample.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SliderComponent-1799189539
Please check the sample and if the issue still persists, share with us a more detailed explanation of the exact issue you are facing at your end and replicate the issue in the shared sample, which would help us assist you promptly.
Regards,
Indhumathy L
Hi Indhumathy Loganathan,
I compared your source with mine. If we add the following code in your source
Program.cs :
builder.Services.AddSyncfusionBlazor(options => { options.EnableRtl = true; options.IgnoreScriptIsolation = true; });
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("ar");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("ar");
----------------------------------------
public class SyncfusionLocalizer : ISyncfusionStringLocalizer
{
// To get the locale key from mapped resources file
public string GetText(string key)
{
return this.ResourceManager.GetString(key);
}
// To access the resource file and get the exact value for locale key
public System.Resources.ResourceManager ResourceManager
{
get
{
// Replace the ApplicationNamespace with your application name.
return SfResources.ResourceManager;
}
}
}
--------------------------------------------------
output:
Hi Sarah,
We understand that you want to achieve localization for Slider component, so, we suggest you to follow the below documentation.
https://blazor.syncfusion.com/documentation/common/localization
We like to let you know that you have to add the resource files in the ~/Resources folder. The locale resource files for different cultures are available in this GitHub repository. You can get any culture resource file from here and utilize it in your application. For the Slider component, we have added localization for the increase and decrease buttons. You can enable the Slider ShowButtons property to check the locale text.
Please check the shared details at your end and get back to us if you need any further assistance.
Regards,
Indhumathy L
Hi Indhumathy Loganathan,
I have seen what you said in the past. I attached the problem as a project.
Attachment: GridLocalization_Wasm1838360880_RangeSlider_8f417156.rar
2-If we want to find out whether the user has selected a value in the range slider or not. Is it possible to implement the following image?
thank you
Hi Sarah,
We were unable to run the shared sample at our end. Please provide a runnable sample to validate your reported query and it will help to provide a prompt solution.
Query 1 : How to find out whether the user has selected a value in the range slider or not?
Based on your query, we have prepared a Blazor Slider sample with the latest version(V20.3.49). Here, we have retrieved the user-selected Slider value by taking a reference of the Slider component using a button click. For your reference, we have attached the sample.
Refer to the below code snippets.
|
[Index.razor] <SfButton ID="btn" CssClass="e-btn e-primary" Content="GetValue" OnClick="getValue"></SfButton> <SfSlider TValue="int" @ref="sliderObj" Min="0" Max="17" Value="0" Step="1">…</SfSlider>
@code{ SfSlider<int> sliderObj; public void getValue() { var values = sliderObj.Value; // you can get the user selected value } } |
Query 2 : Is it possible to implement the following image.
With the help of CSS selectors, you can able to override the styles for the corresponding items. Here, we have set the visibility property as hidden for the first tick by using the CSS selector. Check the below code snippet for your reference.
|
[Index.razor] <style> .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick.e-first-tick{ visibility:hidden; } </style> |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfSliderSample1927672620.zip
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Hi LeoLavanya Dhanaraj,
Thank you very much for your answer. I encountered a problem to upload the file on your site. I uploaded the project to another host.
https://filelu.com/t7iu0exn7nip
After executing the project, we see the following picture.
2- Another problem that exists is that I used the component in the
EditForm
<EditForm Model="dto" OnValidSubmit="OnValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText @bind-Value="@dto.Name"></InputText>
<SfSlider Min="1" Max="17" Value="@dto.Val" Step="1" EnableRtl="false">
<SliderTicks Placement="Placement.Before" ShowSmallTicks="false" LargeStep="1"></SliderTicks>
</SfSlider>
<button type="submit">Submit</button>
</EditForm>
@code {
public clsNameValue dto { get; set; }
protected override void OnInitialized()
{
dto = new clsNameValue() { Name = "test", Val = 1 };
}
private void OnValidSubmit()
{
var temp = dto.Val;
}
public class clsNameValue
{
public int Val { get; set; }
public string Name { get; set; }
}
}
Hi Sarah,
Thanks for your patience.
Query 1 : Slider is not working in the Arabic culture.
We have validated the reported issue in the Blazor Slider component and considered it a bug on our end. The fix for this issue will be included in our weekly patch release on November 8, 2022. You can track the status of the issue fix using the following feedback link.
Feedback link : https://www.syncfusion.com/feedback/38592/blazor-slider-is-not-working-in-the-arabic-culture
Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.
We appreciate your patience.
Query 2 : Facing an issue when I use the component inside the EditForm.
Based on your shared code details, we have validated your reported query in the Blazor Slider component. We understand that you are facing an issue with Form submitting button. But we were not able to reproduce the mentioned issue at our end. For your reference, we have attached the sample.
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfSliderLocalization215399399.zip
Please check the attached sample and if the issue persists, please share with us the replication procedure or video footage for a better understanding. These details will help us to check and provide a prompt solution. Please get back to us with the requested details.
Regards,
Leo Lavanya Dhanaraj
Hi LeoLavanya Dhanaraj,
We have validated the reported issue in the Blazor Slider component and considered it a bug on our end. The fix for this issue will be included in our weekly patch release on November 8, 2022. You can track the status of the issue fix using the following feedback link.
Thank you for your attention.
Based on your shared code details, we have validated your reported query in the Blazor Slider component. We understand that you are facing an issue with Form submitting button. But we were not able to reproduce the mentioned issue at our end. For your reference, we have attached the sample.
I downloaded and ran this project. The output is as follows:
Thank you
Hi Sarah,
We understand that the second issue no longer occurs in the shared sample. We will let you know once the issue is fixed as promised. We appreciate your patience.
Regards,
Indhumathy L
I am waiting for your response
thank you
Sarah, Due to unforeseen circumstances, we were unable to include the fix as promised. We need some additional time to resolve this issue. The fix for this issue will be included in our Volume 4 main release, which is expected to be rolled out in the end of December 2022.
We appreciate your patience.
Hi LeoLavanya Dhanaraj,
I thank you for following up
Hi Sarah,
Thanks for your patience.
We are glad to announce that our patch release (V20.4.40) has been rolled out successfully. The issues with “Blazor Slider is not working in the Arabic culture” have been resolved in this release.
To access this fix, we suggest you update the package to 20.4.40 and we include the sample in the latest version for your reference.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SliderArabic-1753614281.zip
Feedback: https://www.syncfusion.com/feedback/38592/blazor-slider-is-not-working-in-the-arabic-culture
Release Notes: https://blazor.syncfusion.com/documentation/release-notes/20.4.40?type=all#bug-fixes-13
Regards,
Leo Lavanya Dhanaraj