added slider and ratingbar widget

Author: pinkeshmars

docs/resources/control-flow/user-interactivity/forms/form-widgets/ratingbar.md

@@ -0,0 +1,102 @@
+---
+slug: ratingbar
+title: RatingBar
+tags: []
+description: Learn how to add RatingBar in your FlutterFlow app.
+sidebar_position: 5
+---
+
+# RatingBar
+
+The RatingBar widget is used to show a rating or collect ratings from users (this is an interactive RatingBar). For example, you can use the RatingBar widget inside an e-commerce app to show ratings for a product.
+
+## Adding a RatingBar to Your Project
+
+Here's an example of how you can use the RatingBar widget in your project:
+
+1. First, drag the **Column** widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree. Set its **Cross Axis Alignment** to **Start**.
+2. Now add one **Image** widget inside the column and set its **Width** property to **inf** and **Height** property to 200.
+3. Add a **Text** widget (Inside the Column). Change the **name** to **Item Name** and the **Theme Style** to **Title 1.** Set the **Left Padding** to 10.
+4. Add another **Text** widget. Change the **name** to **Item Description** and the **Theme Style** to **Subtitle 2.** Set the **Left Padding** to 10.
+5. Finally, add the **RatingBar** widget from the **Form Elements** tab or add it directly from the widget tree.
+
+![](../../imgs/ratingbar-demo.gif)
+
+### Collectings Ratings from Users (Interactive RatingBar)
+
+To collect ratings from users:
+
+1. Select **RatingBar** from the widget tree or from the canvas area.
+2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section.
+3. Find the **Interactive** property and checkmark it (click on it).
+
+![collect-ratings](../../imgs/collect-ratings.gif)
+
+### Setting The Rating Value
+
+The Rating can be set by inputting an amount or set from a variable. This is only for a RatingBar that is not interactive.
+
+To manually set the Rating value for the RatingBar:
+
+1. Select **RatingBar** from the widget tree or from the canvas area.
+2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section.
+3. Find the **Rating** property and change the default value.
+
+:::info
+You can also enter the value in decimal such as 1.5. When a decimal is used, a portion of the icon will be colored.
+:::
+
+![set-rating-value](../../imgs/set-rating-value.gif)
+
+### Customize the Icon
+
+Here's an example of how you can customize the icons appearing in the RatingBar:
+
+1. Select **RatingBar** from the widget tree or from the canvas area.
+2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section.
+3. Find the **Icon Count** property and change the value to 10.
+4. Set the **Icon Size** property to 30.
+5. Find the **Icon Selector** property below, Click on the **Start Rounded** button, then search and select the icon name with **FontAwesome.smile**.
+
+![customize-icon](../../imgs/customize-icon.gif)
+
+### Changing the Rated/Unrated Color
+
+To change the rated and unrated color (color for icons that are not filled in) for the RatingBar:
+
+1. Select **RatingBar** from the widget tree or from the canvas area.
+2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section.
+3. Now, find the **Rated Color** property, Click on the box next to **Secondary**, select the color, and then click **Use Selected Color** or click on **Secondary** and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
+4. Similarly, set the **Unrated** **Color** as well.
+
+![changing-ratingbar-color](../../imgs/changing-ratingbar-color.gif)
+
+### Add Padding between Icons
+
+To add padding between icons:
+
+1. Select **RatingBar** from the widget tree or from the canvas area.
+2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section.
+3. Find the **Icon Padding** property and enter the values.
+
+:::info
+Use the Lock button to change the Left, Top, Right and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.
+:::
+
+![ratingbar-adding-padding-between-icons](../../imgs/ratingbar-adding-padding-between-icons.gif)
+
+### Changing the Axis
+
+In a very rare case, you may want to make all icons (inside the RatingBar) appear vertically. This can be done using the Axis property.
+
+To change the Axis:
+
+1. Select **RatingBar** from the widget tree or from the canvas area.
+2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section.
+3. Find the **Axis** dropdown and change it to **Vertical**.
+
+![ratingbar-change-axis](../../imgs/ratingbar-change-axis.gif)
+
+## Trigger action on change
+
+See how to [trigger an action when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.

docs/resources/control-flow/user-interactivity/forms/form-widgets/slider.md

@@ -0,0 +1,109 @@
+---
+slug: slider
+title: Slider
+tags: []
+description: Learn how to add Slider in your FlutterFlow app.
+sidebar_position: 4
+---
+
+# Slider
+
+The Slider widget is used to select a single value from a range of values. You define the min and max value for the slider, and users can choose the value between the specified range by dragging the slider thumb (sliding circle).
+
+For example, you can use the Slider widget to allow users to set the volume, set the donation amount, etc.
+
+## Adding Slider
+
+Let's build an example of using the Slider widget and retrieve its value in a Text widget.
+
+![Slider widget](../../imgs/slider-demo.gif)
+
+The steps to build the example are as follows:
+
+1. First, add the **Slider** widget from the **Form Elements** tab or add it directly from the widget tree.
+2. Now, add the **Text** widget to display the slider value.
+3. Keep the **Text** widget selected, Move to the properties panel, and click on the **Set from Variable**. This will open a new panel.
+    1. Set **Source** to **Widget State**.
+    2. Set the **Available Options** to **Slider**. If you add multiple sliders, the names would be like Slider1, Slider2, and so on.
+    3. Set the **Number Format Option** if you wish to.
+    4. Click **Confirm**.
+
+![Slider demo](../../imgs/adding-slider.gif)
+
+## Setting initial value
+
+Sometimes you might want to display the slider with the default value. For example, showing the volume slider with the audible volume value. You can do so by setting the initial value for the Slider.
+
+![slider-set-initial-value](../../imgs/slider-set-initial-value.gif)
+
+## Customization
+
+You can customize the appearance and behavior of the widget using the various properties available under the properties panel.
+
+### Setting platform type
+
+You can set the platform type to *Adaptive or Android* for **this widget. Selecting the Adaptive type will display the widget in its native style. That means the widget will show iOS-style rendering when running on iOS devices and Android-style rendering when running on Android devices.
+
+To set the platform type:
+
+1. Select the **Slider** widget from the widget tree or the canvas area.
+2. Move to the properties panel and open the **Platform** section.
+3. Set the **Platform Type** among the **Android** or **Adaptive**.
+
+![Setting platform type](../../imgs/set-platform-type.gif)
+
+### Defining slider range
+
+You can define the slider range by setting the min and max values.
+
+To set the min and max values:
+
+1. Select the **Slider** widget from the widget tree or the canvas area.
+2. Move to the properties panel and scroll down to the **Slider Properties** section.
+3. Find the **Min** property and enter the value. This will be the start value of the range.
+4. Find the **Max** property and enter the value. This will be the end value of the range.
+
+![Defining slider range](../../imgs/slider-range.gif)
+
+### Setting step size
+
+By default, you can move and stop the slider thumb at any place on the slider track. To make the slider thumb stop at a specific interval, you can set the step size value.
+
+:::info
+If the range is not evenly divisible by the step size, the slider thumb will stop at the closest value in the range.
+:::
+
+To set the step size:
+
+1. Select the **Slider** widget from the widget tree or the canvas area.
+2. Move to the properties panel and scroll down to the **Slider Properties** section.
+3. Find the **Step Size** property and enter the value.
+
+![Setting step size](../../imgs/slider-step-size.gif)
+
+### Changing color
+
+To change the slider colors:
+
+1. Select the **Slider** widget from the widget tree or the canvas area.
+2. Move to the properties panel and scroll down to the **Slider Properties** section.
+3. To change the active color, find the **Active Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
+4. To change the inactive color, find the **Inactive Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
+
+![Changing color](../../imgs/slider-color.gif)
+
+### Showing slider value
+
+You can show the slider value while moving the slider thumb on the track. The value appears as a tooltip above the slider thumb.
+
+To show the slider value:
+
+1. Select the **Slider** widget from the widget tree or the canvas area.
+2. Move to the properties panel and scroll down to the **Slider Properties** section.
+3. Find the **Show Value** property and turn on the toggle.
+
+![Showing slider value](../../imgs/showing-slider-value.gif)
+
+## Trigger action on change
+
+See how to [trigger an action when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.