Sfslider default value

Good day,

Is it possible to start the SFSlider value from middle with out previous values getting selected.

Example: Slider values from  -5 -4 -3 -2 -1 0 1 2 3 4 5

Is it possible to set 0 as default value without slider selecting previous value.

when slider initialize thumb position will be on 0, user can drag left or right to choose the desired values.

thanks,

Fazil


11 Replies 1 reply marked as answer

YG Yuvaraj Gajaraj Syncfusion Team April 22, 2022 02:37 PM UTC

Hi Fazil,


Greetings from Syncfusion. We already have a sample to start the thumb from the 0th value in the slider. We have attached the Demo sample and code link below for your reference.

Demo sample: https://flutter.syncfusion.com/#/slider/basic-features/step

Code link: https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/basic_features/slider_step.dart#L59


Regards,

Yuvaraj.



FS fazil samir April 23, 2022 11:57 AM UTC

Hello yuvaraj,


Many thanks for your reply.




I know that we can set the default value for the slider. my requirement is different, when I set a default value in slider previous values in slider got selected as you can see in the above image default value is set to 0, and you can see the slider color (blue) slides from the left which highlights -10, -5.


I want the thumb to be on 0 with out previous values getting selected.


Thanks,

Fazil



YG Yuvaraj Gajaraj Syncfusion Team April 25, 2022 04:44 PM UTC

Hi Fazil,


We analyzed the query and suggested you use the activateTrackColor and inactiveTrackColor as the same to achieve your requirement. Then you can get the slider value in the onChanged callback in the slider. But the activated track color remains the same, and it didn’t get changed on moving the thumb from zero. We have attached the code snippet below to achieve your requirement.


Chart

Description automatically generated


Code snippet:

SfSliderTheme(

 data: SfSliderThemeData(

   activeTrackColor: Colors.blue.withOpacity(0.24),

   inactiveTrackColor: Colors.blue.withOpacity(0.24),

   thumbColor: Colors.blue,

 ),

 child: SfSlider(

    // Other required properties

  )


In case you wish to have a different active color while moving from zero to any other values or if your scenario is different, kindly get back to us with your exact requirement, and we will provide you with the solution for your scenario.


Regards,

Yuvaraj.



FS fazil samir April 25, 2022 07:27 PM UTC

Many thanks for your response.


Unfortunately I have different active color,  while moving from zero to any other values.


Thanks,

Fazil





FS fazil samir replied to fazil samir April 27, 2022 08:58 AM UTC

Any update on this please.


Thanks,

Fazil



YG Yuvaraj Gajaraj Syncfusion Team April 28, 2022 01:39 PM UTC

Hi Fazil,


We have analyzed your scenario, and we suggest you use the thumbShape property used to render a custom thumb in the slider. Using this, you can customize the rendering of an active bar based on the center of the slider bar and thumb location. Here we have override the thumb and active bar rendering and achieved your requirement. We have also attached the sample below for your reference.


Timeline

Description automatically generated with medium confidence


KB: https://www.syncfusion.com/kb/12758/how-to-draw-custom-thumb-in-flutter-slider


Regards,

Yuvaraj.


Attachment: f174563_f59c908.zip

Marked as answer

FS fazil samir replied to Yuvaraj Gajaraj April 29, 2022 09:54 PM UTC

Many thanks for your support. works like charm.


I have another issue, with slider label, see the below image. is it possible to wrap the content with label formatter. content shown on slider is dynamic.





YG Yuvaraj Gajaraj Syncfusion Team May 2, 2022 12:51 PM UTC

Hi Fazil,


We have analyzed your query, and we would like to let you know that currently, we don’t have a feature to wrap labels when it exists a slider area. We have already logged the feedback as a feature request for this and attached it below for your reference. As of now, you can achieve this by adding a ‘\n’ in the text and moving it to the next line.


Feedback: https://www.syncfusion.com/feedback/31551/need-text-alignment-to-align-track-labels-in-sfslider


Regards,

Yuvaraj.



CM Claudio Miello replied to Yuvaraj Gajaraj May 4, 2024 03:06 PM UTC

Hello  Yuvaraj ,

Is it possible to apply this solution also for the Blazor platform? 

Because I have the same needs but for Blazor.

Thank you.



LP Lokesh Palani Syncfusion Team May 7, 2024 01:53 PM UTC

Hi Claudio,


Unfortunately, the solution we provided is specific to Flutter Slider. Blazor uses a different framework, so the solution won't directly translate. Let us confirm that you are expecting the Slider selection from the center of the track in our Blazor Slider? If so, we can connect you with Blazor development team for the further assistance.


Blazor slider: https://www.syncfusion.com/blazor-components/blazor-range-slider


Regards,

Lokesh P.



CM Claudio Miello replied to Lokesh Palani May 7, 2024 09:31 PM UTC

Hi Lokesh, 

yes my request is that the track starts from the center to where the cursor is located.

Anyway, thank you for the quick response.


Regards

Claudio M.


Loader.
Up arrow icon