search

syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.48k stars 699 forks source link

Request for Slider Component with Video Timestamp Integration #1957

Open mratanpara opened 5 days ago

mratanpara commented 5 days ago

Dear Syncfusion Team,

I hope you are well.

I am writing to request the development of a slider component similar to the one demonstrated in the video. The component should have the capability to display videos along a timeline, with a specific feature of highlighting the recorded times on the slider.

Here are the detailed requirements:

  1. Slider Component: The slider should visually represent a timeline.
  2. Video Integration: Videos recorded during specific time intervals should be shown on the slider.
  3. Timestamp Highlighting: 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.
  4. User Interaction: Users should be able to interact with the slider to navigate through the recorded video segments easily.

Here is the video for your reference. This video illustrates the type of slider component I am looking for.

Please let me know if you need any additional information or have any questions. I look forward to your confirmation and an estimated timeline for completing this component.

Thank you for your assistance.

PreethikaSelvam commented 4 days ago

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.