Request for Slider Component with Video Timestamp Integration about flutter-widgets HOT 1 CLOSED

Hi @mratanpara,

Query 1: The slider should visually represent a timeline.

To achieve your requirement, we suggest using a DateTime values. You can show date values in the range selector by setting DateTime values to the min, max, and values properties. We have shared UG documentation for your reference.

UG Link: https://help.syncfusion.com/flutter/range-selector/getting-started#set-date-range

Query 2: Videos recorded during specific time intervals should be shown on the slider. For example, if a video was recorded from 12:00 PM to 12:30 PM, the slider should display a yellow line or marker from 12:00 PM to 12:30 PM.

To show a line or marker from 12:00 PM to 12:30 PM, we suggest customizing the thumb of the SfRangeSelector, which can be used to drag and change the selected values of the range slider that correspond to specific video recording intervals (e.g., 12:00 PM to 12:30 PM). You can show custom widgets like icons or text inside the thumbs using the startThumbIcon and the endThumbIcon properties.

UG Links:
https://help.syncfusion.com/flutter/range-slider/thumb-and-overlay
https://help.syncfusion.com/flutter/range-slider/thumb-and-overlay#thumb-icon

Query 3: Users should be able to interact with the slider to navigate through the recorded video segments easily.

You can use RangeController for setting and getting the current selected values of the range selector, and based on that, you can show the recorded video segments using a child property. This allows you to easily navigate through recorded video segments.

Currently, we have provided built-in support for selecting the chart segments based on the selected range in the range selector. To achieve this segment selection, you must set the SelectionSettings.selectionController property in the SfCartesianChart.series property. Similarly, to the chart, we suggest using it for a recorded video segment.

UG Link:
https://help.syncfusion.com/flutter/range-selector/range-controller
https://help.syncfusion.com/flutter/range-selector/range-controller#selection-with-sfchart

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.

from flutter-widgets.