add sliders functionality

 - update update_menu.rs ButtonBuilder and Button to be consistent with
   Slider

Signed-off-by: Andrei Gherghescu <[email protected]>

Author: andrei-ng

docs/book/src/SUMMARY.md

@@ -31,3 +31,6 @@
     - [Subplots](./recipes/subplots.md)
         - [Subplots](./recipes/subplots/subplots.md)
         - [Multiple Axes](./recipes/subplots/multiple_axes.md)
+    - [Custom Controls](./recipes/custom_controls.md)
+        - [Dropdowns](./recipes/custom_controls/dropdowns.md)
+        - [Sliders](./recipes/custom_controls/sliders.md)

docs/book/src/gallery.md

@@ -0,0 +1,8 @@
+# Custom Controls
+
+This section covers interactive controls that can be added to plots to modify data or layout attributes dynamically.
+
+| Control Type | Preview |
+|--------------|---------|
+| [Dropdown Menus and Buttons](./custom_controls/dropdowns.md) | ![Dropdown Example](./img/dropdown.png) |
+| [Sliders](./custom_controls/sliders.md) | ![Slider Example](./img/sliders.png) |

docs/book/src/gallery/financial_charts.md

@@ -0,0 +1,30 @@
+# Dropdown Menus
+
+Dropdown menus, implemented as an `UpdateMenu` in Plotly.rs, allow users to modify a plot's data or layout attributes by selecting an option from a list.
+
+## Dropdown for Selecting Data
+
+You can use a dropdown menu to switch between different sets of data. In this example, we show two different bar charts and use a dropdown to select which one is visible.
+
+```rust,no_run
+{{#include ../../../../../examples/custom_controls/src/main.rs:bar_plot_with_dropdown_for_different_data}}
+```
+{{#include ../../../../../examples/custom_controls/output/inline_bar_plot.html}}
+
+## Dropdown for Modifying Layout
+
+Update menus can also modify layout attributes. Here, we use buttons (a variation of a dropdown) to change the `bar_mode` of a bar chart, toggling between grouped and stacked bars.
+
+```rust,no_run
+{{#include ../../../../../examples/custom_controls/src/main.rs:bar_chart_with_modifiable_bar_mode}}
+```
+{{#include ../../../../../examples/custom_controls/output/inline_bar_chart.html}}
+
+## Dropdown for Modifying Colorscales
+
+You can dynamically change the colorscale of a heatmap or contour plot.
+
+```rust,no_run
+{{#include ../../../../../examples/custom_controls/src/main.rs:heat_map_with_modifiable_colorscale}}
+```
+{{#include ../../../../../examples/custom_controls/output/inline_heat_map.html}} 

docs/book/src/recipes/custom_controls.md

@@ -0,0 +1,39 @@
+# Sliders
+
+
+Sliders provide interactive controls to animate through different data states or parameters. They are different from range sliders and are typically used for animating through time series data or changing plot parameters dynamically.
+
+Data sliders support various customization options including:
+- **Positioning**: Control x, y coordinates and anchors
+- **Styling**: Background color, border color, width, and font
+- **Behavior**: Active step highlighting, step execution control
+- **Dimensions**: Length, width, and orientation (horizontal/vertical)
+- **Steps**: Multiple steps with different data states or parameters
+
+## Customizing a Simple Data Slider
+
+Sliders are perfect for stepping through sequential data, like time series. This example creates a slider to show the population of different animals for four consecutive years.
+It shows how to use the slider API to customize slider features.
+
+```rust,no_run
+{{#include ../../../../../examples/custom_controls/src/main.rs:bar_chart_with_slider_customization}}
+```
+{{#include ../../../../../examples/custom_controls/output/inline_bar_chart_with_slider_customization.html}}
+
+## Slider for Parameter Control
+
+Sliders aren't just for data; they can also be used to control parameters in a function. Here, a slider modifies the frequency of a sinusoidal wave, updating the plot in real-time.
+
+```rust,no_run
+{{#include ../../../../../examples/custom_controls/src/main.rs:sinusoidal_slider_example}}
+```
+{{#include ../../../../../examples/custom_controls/output/inline_sinusoidal_slider_example.html}}
+
+## Advanced Slider: GDP vs. Life Expectancy
+
+This example, based on the Python Plotly Gapminder dataset, demonstrates a more complex use case. A slider is used to animate a bubble chart showing the relationship between GDP per capita and life expectancy across different continents over several decades. See [https://plotly.com/python/sliders/](https://plotly.com/python/sliders/)
+
+```rust,no_run
+{{#include ../../../../../examples/custom_controls/src/main.rs:gdp_life_expectancy_slider_example}}
+```
+{{#include ../../../../../examples/custom_controls/output/inline_gdp_life_expectancy_slider_example.html}} 

docs/book/src/recipes/custom_controls/dropdowns.md

@@ -42,4 +42,4 @@ The `to_inline_html` method is used to produce the html plot displayed in this p
 {{#include ../../../../../examples/financial_charts/src/main.rs:customizing_tick_label_formatting_by_zoom_level}}
 ```
 
-{{#include ../../../../../examples/financial_charts/output/inline_customizing_tick_label_formatting_by_zoom_level.html}}
+{{#include ../../../../../examples/financial_charts/output/inline_customizing_tick_label_formatting_by_zoom_level.html}}

docs/book/src/recipes/custom_controls/sliders.md

@@ -5,6 +5,11 @@ authors = ["Michael Freeborn <[email protected]>"]
 edition = "2021"
 
 [dependencies]
-itertools = "0.10"
+itertools = "0.12"
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+csv = "1.3"
+ndarray = "0.15"
+
 plotly = { path = "../../plotly" }
-plotly_utils = { path = "../plotly_utils" }
+plotly_utils = { path = "../plotly_utils" }