[8.x] [Docs] Add visuals to the Use and Filter Dashboards page (#193489…

…) (#193746)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Docs] Add visuals to the Use and Filter Dashboards page
(#193489)](#193489)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"wajihaparvez","email":"wajiha.parvez@elastic.co"},"sourceCommit":{"committedDate":"2024-09-23T15:54:27Z","message":"[Docs]
Add visuals to the Use and Filter Dashboards page (#193489)\n\n##
Summary\r\n\r\nAdded screenshots and gifs to the [Use and
Filter\r\nDashboards](https://www.elastic.co/guide/en/kibana/master/_use_and_filter_dashboards.html)\r\npage
as part of the ongoing project to add more visuals to the\r\nDashboards
docs.\r\n\r\nRel:[#457](elastic/platform-docs-team#457)
and\r\n[#466](https://github.com/elastic/platform-docs-team/issues/466)","sha":"1cd0531a6a27246a2f3d268f5d37067639fd9479","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","release_note:skip","v9.0.0","v8.16.0","backport:version"],"title":"[Docs]
Add visuals to the Use and Filter Dashboards
page","number":193489,"url":"https://github.com/elastic/kibana/pull/193489","mergeCommit":{"message":"[Docs]
Add visuals to the Use and Filter Dashboards page (#193489)\n\n##
Summary\r\n\r\nAdded screenshots and gifs to the [Use and
Filter\r\nDashboards](https://www.elastic.co/guide/en/kibana/master/_use_and_filter_dashboards.html)\r\npage
as part of the ongoing project to add more visuals to the\r\nDashboards
docs.\r\n\r\nRel:[#457](elastic/platform-docs-team#457)
and\r\n[#466](https://github.com/elastic/platform-docs-team/issues/466)","sha":"1cd0531a6a27246a2f3d268f5d37067639fd9479"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193489","number":193489,"mergeCommit":{"message":"[Docs]
Add visuals to the Use and Filter Dashboards page (#193489)\n\n##
Summary\r\n\r\nAdded screenshots and gifs to the [Use and
Filter\r\nDashboards](https://www.elastic.co/guide/en/kibana/master/_use_and_filter_dashboards.html)\r\npage
as part of the ongoing project to add more visuals to the\r\nDashboards
docs.\r\n\r\nRel:[#457](elastic/platform-docs-team#457)
and\r\n[#466](https://github.com/elastic/platform-docs-team/issues/466)","sha":"1cd0531a6a27246a2f3d268f5d37067639fd9479"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: wajihaparvez <wajiha.parvez@elastic.co>

docs/user/dashboard/use-dashboards.asciidoc

@@ -78,6 +78,9 @@ The *Exists* query returns all documents that contain an indexed value for the f
 
 . To display only the options you selected in the dropdown, click image:images/dashboard_showOnlySelectedOptions_8.3.0.png[The icon to display only the options you have selected in the Options list].
 
+[role="screenshot"]
+image::images/dashboard_controlsOptionsList_8.7.0.png[Options list control]
+
 [float]
 [[filter-the-data-with-range-slider-controls]]
 ==== Filter the data with Range slider controls
@@ -91,6 +94,9 @@ The dashboard displays only the data for the range of values you specified.
 
 . To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider].
 
+[role="screenshot"]
+image::images/dashboard_controlsRangeSlider_8.3.0.png[Range slider control]
+
 [float]
 [[filter-the-data-with-time-slider-controls]]
 ==== Filter the data with time slider controls
@@ -106,9 +112,17 @@ Filter the data within a specified range of time.
 
 . To clear the specified values, click image:images/dashboard_controlsClearSelections_8.3.0.png[The icon to clear all specified values in the Range slider].
 
+[role="screenshot"]
+image::images/dashboard_timeSliderControl_8.7.0.gif[Time slider control]
+
 [float]
 === Use filter pills
 
+Use filter pills to focus in on the specific data you want.
+
+[role="screenshot"]
+image::images/dashboard_filter_pills_8.15.0.png[Filter pills, width=50%]
+
 [float]
 ==== Add pills by interacting with visualizations